Problem - różne style checkboxów na jednej stronie

0

Witam.

męczę się od klilku dni z następującym problemem:
Jak napisać poprawnie CSS aby checkboxy posiadały różne style.

Czyli jeśli napiszę class="checkboxZielony" to CSS .checkboxZielony
oraz
class="checboxCzerwony" to CSS .checboxCzerwony.

Przeszukalem i przetestowałem masę źródeł jakich można znaleźć w Wujku G...
i najlepszym rozwiązaniem jak do tej pory to zastosowanie:

input[type=checkbox] {
	display:none;
}

input[type=checkbox] + label {
	background-image:url('prywatne_off.png');
	height: 45px;
	width: 45px;
	display:inline-block;
	padding: 0 0 0 0px;
}
 
input[type=checkbox]:checked + label {
	background-image:url('prywatne_on.png');
	height: 45px;
	width: 45px;
	display:inline-block;
	padding: 0 0 0 0px;
}

Jednakże przerobienie tego na klasy kończy się różnym wyświetlaniem w przeglądarkach
tj. FF, Opera, Chrome, IE :(

Znacie lub posiadacie jakieś sensowne rozwiązanie... Z góry dzięki za jakiekolwiek podpowiedzi...

Ps. zależy mi aby rozwiązanie działało we wszystkich przeglądarkach !!!

0

Kilka klas do jednego elementu. class="checkbox zielony"

0

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:

elementy select w przeglądarkach

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1