Inputy o typie checkbox
, radio
, a także select
-y, i ogólnie większość elementów formularzy - NIE BĘDZIE wyświetlonych tak samo w przeglądarkach, booo... specyfikacja CSS nie określa w jaki sposób dane elementy się mają zachowywać. Przeglądarki stylując checkboxy podążają za własnym "widzimisię", natomiast niestylowane - na ogół zależą od skórki systemu lub samej przeglądarki (tj. np. jakiś chamskozielony styl OS/przeglądarki spowoduje, że na większości stron checkboxy będą zielone).
Pokażę Ci przykład na elemencie select:
Pierwszy select ma ustawiony padding od góry i od dołu. Dodatkowo jego option
-y mają tło (każdy różne).
Drugi element ma ustawioną wysokość. Cały element select ma nadane tło.
W pierwszym przypadku w Operze strzałeczka się rozciąga, tekst jest wyśrodkowany pionowo.
W drugim tak samo.
W pierwszym w Operze niezależnie od wybranego elementu - tło jest białe, ale po rozwinięciu - widać różne kolory.
W drugim selekcie w Operze wszystkie elementy po rozwinięciu mają żółte tło, wraz z samym selectem.
W Firefoxie z paddingiem strzałeczka się tak śmiesznie urywa, tekst jest ok.
W drugim przypadku (wysokość) tekst jest wyrównany pionowo do góry, strzałeczka jest rozciągnięta. [tu zaznaczę, że wg mnie oba rozwiązania są brzydkie]
Jeżeli chodzi o kolory to FF zachowuje się identycznie jak Opera.
Teraz IE(8).
Z nieznanych mi powodów ani padding, ani height nie zmieniły wysokości selectów o.O Nie wnikam czemu, ale nie wrzucałem żadnego reset css, html5 shiv niby dołączone, mniejsza o to - IE zachowa się tu podobnie jak Firefox, ALE w wersji z height
- wyrównanie pionowe będzie do dołu -.- Tak na przekór, a co! [wciąż uważam, że równanie do środka ma największy sens]
Kolory - jeszcze inaczej. Drugi select - tak samo jak w FF/Operze, natomiast pierwszy przyjmuje kolor aktualnie wybranego optiona
.
Czyli - każdy sobie po swojemu ;] Tak samo jest z checkboxami właśnie, polami radio, inputem z typem file
i tego typu rzeczami.
Jedynym sposobem na w miarę ujednolicenie tego są biblioteki javascript (Googluj custom checkboxes
), gdzie po prostu skrypt wstawia obrazki i reaguje na klikanie po nich - jednak to niszczy naturalną funkcjonalność formularzy (np. skakanie TABem po polach).
Rozwiązanie: zaakceptuj niestylowane formularze, stylowane z różnicami (ale odradzam zupełnie checkboxy i radio), albo javascript.