Стилизуем checkbox css

Сегодня мы научимся изменять внешний вид наших чекбоксов только с помощью css. Тема это довольно популярная, но в большинстве решений используются jQuery плагины. В принципе, в этом нет необходимости. Сейчас мы в этом убедимся.

Для начала создадим обычный чекбокс (разметка):

<div class="checkbox">
<input type="checkbox" id="check"><label for="check">Выбери меня</label>
</div>

Здесь чекбокс и текст для него. Все это обернуто в div. Это сделано специально и нужно! Кстати, кто не знал: for у тега label должен соответствовать нужному id чекбокса, чтобы при клике по тексту выбирался чекбокс.

Теперь перейдем к стилям:

.checkbox {
	position:relative;
	padding-left:25px;
}
.checkbox input[type=checkbox] {
	display:none;
}
.checkbox label:after {
	content:'';
	display:block;
	height:14px;
	width:14px;
	outline:1px solid #939598;
	position:absolute;
	top:0;
	left:0;
}
.checkbox input[type=checkbox]:checked + label:after {
	outline:1px solid #939598;
	border:2px solid #fff;
	width:10px;
	height:10px;
	background-color:#63849F;
}

Здесь все мега просто:) Использование псевдоэлемента after и состояние чекбокса :checked позволяет добиться желаемого результата. Логика: скрываем настоящий чекбокс. У описания для нужного чекбокса показываем псевдоэлемент и стилизуем его как угодно. При клике по описанию - чекбоксу присваивается свойство (чекнутый) и мы выражением input[type=checkbox]:checked + label:after меняем вид псевдоэлемента на нужный. Profit!