Верх страницы
Обложка к записи «Дедовский» способ кастомизации чекбоксов и радиокнопок на CSS
Время для прочтения: 0 мин. 19 сек.

«Дедовский» способ кастомизации чекбоксов и радиокнопок на 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

Ссылки

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

Комментарии
Подписаться
Уведомить о
guest
11 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Alexpts
6 лет назад

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

mihdan
6 лет назад
Ответить на  Alexpts

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

Alexpts
6 лет назад
Ответить на  mihdan

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

mihdan
6 лет назад
Ответить на  Alexpts

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

Igor
Igor
2 лет назад

You a cool writer and this is a cool article, but can you please change the picture which representing your article, it hurts my child psyche and feelings )))

lildoc
lildoc
1 год назад

я бы почитала статью, но картинка вверху испортила всё настроение. А почему бы жопу мужика с яйцами туда не поставить? пойду почитаю где-нибудь в другом месте/

Женя
Женя
11 месяцев назад
Ответить на  Кобзарёв Михаил

Я тоже не прочел статью — залюбовался картинкой! 😉

Виталий
Виталий
10 месяцев назад

Действительно, как Вам подсказывают, добавьте какую-то демку)) Чтобы мы могли протестировать, то есть пощупать и потрогать ваше творение!))