Xiper

Кастомные checkbox и radio на CSS

Автор: Евгений Рыжков Дата публикации:

Задача

Кастомизировать checkbox и/или radio без использования Javascript, сохранив поведения элементов управления.

Решение

В отличии от Javascript решения, в данном не будем ломать голову как ведут себя дефолтные поля: мы их никуда девать не будем.

<input type="checkbox" id="test-check1" /gt;
<label for="test-check1">Чекбокс 1:</label>

input[type=checkbox] {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}
label {
	cursor: pointer;
}
label:after {
	content: " ";
	display: inline-block;
	width: 17px;
	height: 17px;
	background: url(img/checkbox-2.png);
	position: relative;
	top: 3px;
	margin-left: 15px;
}
input[type=checkbox]:checked + label:after {
background-position: 0 -17px;
}
label:hover:after {
background-position: 0 -34px;
}
input[type=checkbox]:checked + label:hover:after {
background-position: 0 -51px;
}

В живую. Поддерживается:

  • IE9+
  • Firefox 4+
  • Opera 11.6+
  • Chrome
  • Safari 5+
  • Android 4
  • iOs ??

Для более старых версий или оставляем дефолтные поля, или используем Javascript.

Заметка

Не важно где по дизайну расположен элемент управления. По коду он должен идти первым.

Материалы

Lea Verou | CSS3 Secrets: 10 things you might not know about CSS3