Пример оформления checkbox'а с использованием спрайта

16.11.2021

Небольшая памятка о том как стилизовать checkbox, если никаких особых анимаций и элементов оформления не требуется.

 
[type="checkbox"] {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

[type="checkbox"] + label::before {
	content: '';
	display: inline-block;
	margin-right: 13px;
	width: 13px;
	height: 13px;
	background: url('/images/checkbox_sprites.png') -10px -10px;
}

[type="checkbox"]:checked + label::before {
	content: '';
	background: url('/images/checkbox_sprites.png') -43px -10px;
}

 
<div class="demo">
    <input id="fb_a_2" type="checkbox">
    <label for="fb_a_2">Я согласен (согласна) на обработку...</label>
</div>

Живой пример:

Также есть вариант оформления checkbox'а когда он внутри label


Категории: Web, HTML, CSS
Пометки: Кастомный чекбокс, оформление checkbox, checkbox css, стилизировать checkbox
Яндекс.Метрика