Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.
![](https://habrastorage.org/r/w1560/storage2/1bd/49e/863/1bd49e8634fa96c7f7dd9b8e6f789005.png)
Демонстрация Скачать исходники
Для начала сделаем простой checkbox:
Теперь необходимо спрятать чекбокс и использовать спрайты для отображения отмеченного чекбокса/радиокнопки:
![](https://habrastorage.org/r/w1560/storage2/ef1/568/62c/ef156862cd09694730f75a069ee3d8f3.png)
Осталось только заставить все это работать. По клику должен меняться спрайт с отмеченного на неотмеченный и наоборот:
![](https://habrastorage.org/r/w1560/storage2/d6d/8ca/3f9/d6d8ca3f9631dffa60fe85445068e6bc.png)
Псевдоклассы, в частности используемый :checked, отлично работают в большинстве браузеров, за исключением Internet Explorer 9 (и ниже) и Safari в iOS ниже 6-ой версии. Вот так наша форма отображается в IE:
![](https://habrastorage.org/r/w1560/storage2/36d/d60/578/36dd605785af018a67b738d003ebc1e4.png)
Пост написан по мотивам урока на tutplus.com Quick Tip: Easy CSS3 Checkboxes and Radio Buttons.
![](https://habrastorage.org/storage2/1bd/49e/863/1bd49e8634fa96c7f7dd9b8e6f789005.png)
Демонстрация Скачать исходники
Для начала сделаем простой checkbox:
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
Теперь необходимо спрятать чекбокс и использовать спрайты для отображения отмеченного чекбокса/радиокнопки:
![](https://habrastorage.org/storage2/ef1/568/62c/ef156862cd09694730f75a069ee3d8f3.png)
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(check_radio_sheet.png) left top no-repeat;
cursor:pointer;
}
Осталось только заставить все это работать. По клику должен меняться спрайт с отмеченного на неотмеченный и наоборот:
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(check_radio_sheet.png) left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url(check_radio_sheet.png) -19px top no-repeat;
}
![](https://habrastorage.org/storage2/d6d/8ca/3f9/d6d8ca3f9631dffa60fe85445068e6bc.png)
Поддержка браузерами
Псевдоклассы, в частности используемый :checked, отлично работают в большинстве браузеров, за исключением Internet Explorer 9 (и ниже) и Safari в iOS ниже 6-ой версии. Вот так наша форма отображается в IE:
![](https://habrastorage.org/storage2/36d/d60/578/36dd605785af018a67b738d003ebc1e4.png)
Пост написан по мотивам урока на tutplus.com Quick Tip: Easy CSS3 Checkboxes and Radio Buttons.