«Дедовский» способ кастомизации чекбоксов и радиокнопок на CSS

Я, обычно, пользуюсь «дедовским» способом, не ломающим стандартное поведение контроллов, не использующим ни капли JavaScript — только чистый CSS3.

Тут главное соблюдать структуру, чтобы работали соседние селекторы в CSS.

Структура HTML:

<div class="checkbox">
	<input type="checkbox" id="foo-1" hidden />
	<label for="foo-1">обычный чекбокс</label>
</div>
<div class="checkbox">
	<input type="checkbox" id="foo-2" checked hidden />
	<label for="foo-2">отмеченный чекбокс</label>
</div>

Все пояснения есть в CSS-коде, если что-то не понятно — пишите в комментах, разберемся вместе.

Листинг CSS:

.checkbox,
.radio {
	position: relative;
}
/**
 * подгоняем размер чекбокса/радиокнопки под картинку,
 * обнуляем отступы, вешаем поверх всего и скрываем
 */  
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
	position: absolute; 
	width: 35px;
	height: 23px; 
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	opacity: 0;
}
/**
 * Освобождаем место под картинку
 */
.checkbox input[type="checkbox"] + label,
.radio input[type="radio"] + label {
 position: relative;
 padding-left: 45px;
 display: block;
 cursor: pointer;	
}
/**
 * Вставляем пустой блок с картинкой
 */
.checkbox input[type="checkbox"] + label:before,
.radio input[type="radio"] + label:before {
 display: block;
 width: 35px;
 height: 23px;
 background: url('../images/sprites/forms.png');
 content: " ";
 vertical-align: middle;
 position: absolute;
 left: 0;
 top: 0;
}
/**
 * Позиционируем фоновую картинку в
 * зависимости от состояния контролла
 */
.radio input[type="radio"] + label:before {
 background-position: -35px 0;
}
.radio input[type="radio"]:checked + label:before {
 background-position: 0 0;
}
.checkbox input[type="checkbox"] + label:before {
 background-position: -35px 0;
}
.checkbox input[type="checkbox"]:checked + label:before {
 background-position: 0 0;
}

По аналогии можно добавить обработку состояний контроллов hover и focus.

Поддежка браузерами

Судя по данным о поддержке CSS3 в браузерах — это: IE9+, FF 3.5, Chrome 4, Safari 3.2.

Живой пример

See the Pen RNGBzz by mihdan (@mihdan) on CodePen.0

Ссылки

• iOS: input labels don’t focus on associated fields