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

Ссылки

Источник: https://www.kobzarev.com/makeup/dedovskiy-sposob-kastomizatsii-chekboksov-radioknopok-na-css/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: