Стилизация чекбоксов и радио-кнопок

Стилизация элементов форм важная часть работы веб-разработчика. Не стилизованные элементы форм в разных браузерах и операционных системах выглядят по-разному. А это не всегда вписывается в дизайн. Рассмотрим стилизацию чекбоксов (checkbox) и радио-кнопок (radio). Стилизация этих элементов совсем не сложная и позволяет обойтись средствами CSS.

Самый нормальный вариант таков:

HTML

<input id="mycheck" type="checkbox">
<label for="mycheck">Выбрать</label>

CSS

input{
	display: none;
}
label{
	position: relative;
	cursor: pointer;
	padding-left: 30px; /*отведем место для before*/
}
label:before{
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	position: absolute;
	left: 0;
	top: 0;
	background-image: url(../images/star.png);
	background-position: 0 0;
}
input:checked + label:before{
	background-position: 0 100%;
}

Пример:

Share: