[Trick-CSS] Jak ostylować radio i checkbox? (+ efekt transition)

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;
}

Good job  

Bardzo dobra robota