radiobutton
Время для прочтения: 2 мин. 31 сек.

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

Теме кастомизации стандартных контроллов (радиокнопок и чекбоксов) посвящено огромное количество статей, но все они сводятся к подключению ненужных jQuery-плагинов, роль которых - полная замена нативных checkbox и radio на смесь непонятных структур HTML и JavaScript.

Я, обычно, пользуюсь «дедовским» способом, не ломающим стандартное поведение контроллов, не использующим ни капли 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

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

4 комментария

по хронологии
по рейтингу сначала новые по хронологии

Демку бы с кодом выложил бы в песочницу куда-нибудь. Чтобы можно было посмотреть и потрогать.

Так внизу статьи раздел "живой пример" с codepen.io. Или мы о разном говорим?

норм, плагин iframe вырезал с другого домена.

Я уж было испугался, проверил и мобильную версию и на планшете)