Jak nadać własne style elementom input radio i checkbox?
Wbrew pozorom nie jest to trudne zadanie. Jednak wiele osób nie wie jak to zrobić, bowiem nie da się nadać stylów tym elementom w standardowy sposób. Taki sposób nie zadziała:
input[type=checkbox] { background: red; border: 1px solid red; }
Jak więc osiągnąć zamierzony efekt?
Jest to bardzo proste. Zazwyczaj elementowi input towarzyszy label i to on przejmie rolę tego pola.
<input type="checkbox" name="custom1" id="custom1"> <label for="custom1"> Label</label>
Dlatego więc ukryjemy nasz input właściwością display: none i najzwyczajniej ostylujemy element label. Nie możemy jednak zamienić całego label, ponieważ wewnątrz może znajdować się tekst opisujący nasze pole. Użyjemy do tego celu pseudoklasy :befor, po to żeby pole checkbox znalazło się przed naszym opisem.
label:befor powinien mieć pozycję absolutną, aby móc dokładnie ustalić jego położenie, a także być elementem blokowym (display: block). Reszta stylów (wysokość, szerokość, kolory) zależą od naszego uznania. Dodatkowo w poniższym przykładzie została dodana właściwość transition, dzięki temu osiągniemy efekt płynności podczas zaznaczania naszych pól.
W celu określenia co ma się stać gdy element będzie zaznaczony lub zablokowany należy użyć pseudoklas, kolejno :checked i :disabled
W celu uzyskania zamierzonego efektu należy zmienić, według uznania, właściwości background-color, border-color, width, height. Zachęcam do eksperymentowania.
Demo: http://jsfiddle.net/writen/9L9bamcs
input[type=checkbox], input[type=radio] { display: none; /* ukrywamy nasz input */ } input[type=checkbox] + label, input[type=radio] + label { position: relative; padding-left: 23px; /* margines wewnętrzny - trzeba zrobić trochę miejsca dla naszego pola */ } input[type=checkbox] + label:before, input[type=radio] + label:before { position: absolute; content: ""; display: block; /* koniecznie element blokowy, aby móc nadać odpowiednie wymiary */ width: 10px; height: 10px; top: 0; /* ustalamy pozycje */ left: 0; cursor: pointer; /* dodamy jeszcze odpowiedni kursor */ transition: all .4s ease; -webkit-transition: all .4s ease; background-color: #cccccc; border: 3px solid #cccccc; } /* checkbox */ input[type=checkbox] + label:before { border-radius: 2px; } /* radio */ input[type=radio] + label:before { border-radius: 50%; /* aby input radio był okrągły */ } /* gdy zaznaczony */ input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before { background-color: #ffffff; } /* gdy zablokowany */ input[type=checkbox]:disabled + label:before, input[type=radio]:disabled + label:before { background-color: #b6b6b6; border-color: #b6b6b6; } /* gdy zaznaczony i zablokowany */ input[type=checkbox]:checked:disabled + label:before, input[type=radio]:checked:disabled + label:before { background-color: #cccccc; border-color: #b6b6b6; }