Пример оформления 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;
}

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


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