Pozbywamy się problematycznego input type=”image”
Część z was pewnie zapyta: “Ale po co?”. Ano dlatego, że istnieje wiele przypadków, w których programiści wyrywali sobie włosy z głowy, ponieważ nie mogli znaleźć przyczyny, z powodu której ich formularze nie chciały działać. Zapraszam do przeczytania całego wpisu 
Problemy te mają miejsce, jak się można spodziewać, w starszych wersjach Internet Explorer’a, istnieją też pogłoski, jakoby kiedyś również Opera miała z tym kłopoty. Usterka wbrew pozorom trudna do wykrycia, formularz normalnie się przeładowuje, ale zamiast wpisanych danych albo nie dostajemy nic, albo jakieś krzaki. Co jednak zrobić jeśli nam koniecznie jest potrzebny obrazkowy przycisk wysyłania? Już tłumaczę. Załóżmy, że to będzie nasz przykładowy formularz:
<form method="post" action=""> <input type="text" name="dane" /> <input type="image" src="sciezka_do_obrazka.png" /> </form>
Jest to bardzo uproszczona wersja, jednak nic bardziej finezyjnego nie będzie nam teraz potrzebne. Mamy pole, w którym wpisujemy przykładowe dane i przycisk image. Jak się go pozbyć? Tu na pomoc przychodzi nam oczywiście CSS. Wystarczy, że zamiast interesującego nas inputa wstawimy:
<input type="submit" id="submit" value="" />
A w arkuszu:
#submit{
width: 50px;
height: 20px;
display: block;
background: url(scieżka_do_obrazka.png) no-repeat;
}
I gotowe! Wymiary są oczywiście przykładowe i powinny być takie jak wymiary obrazka z przyciskiem. Jeśli macie jakieś uwagi i propozycje, piszcie
Blame
Świetne rozwiązanie!
No albo Tekst
Kiedyś też miałem z tym problem, temat stary jak świat ;]
Btw fajną masz kolorystykę bloga.
Po skorzystaniu z Twojej porady mam kłopot z nakładającym się na przycisk napisem “wyślij” generowanym z automatu przez skrypt obsługi funkcji submit. Jak się tego pozbyć?
No tak, zapomniałem o tym
Wystarczy, że dodasz atrybut value=”" do input’a 
OK, faktycznie wystarczy dać value=”"
Laikom takim jak ja dorzucę, że zmianę (podmianę) obrazka przycisku uzyskujemy prosto i skutecznie w css za pomocą pseudoklasy #submit:hover podając dla niej odpowiedni adres obrazka podmieniającego czyli np.
background: url(scieżka_do_obrazka_numer_2.png) no-repeat;
Piszą o tym, bo javascript mnie zawiódł, a powyższe rozwiązanie działa.
Pozdrawiam.
z tym value=”" trzeba uważać, bo jeśli ktoś ma wyłączone style w przeglądarce, to nie będzie nic wiedział o przycisku.
Ja użyłem przy przełączaniu między wersjami językowymi:
value=”PL” lub “EN”,
a w stylach:
{
color: transparent
}
testowane na FF7 i Chrome14