Стилизация чекбоксов на CSS для DLE

Стилизация чекбоксов на CSS

Стилизация чекбоксов на CSS

Заготовка стилей и верстки для использования в шаблонах.
Реализовано на чистом CSS с использованием псевдоэлементов before и after.
В интернете достаточно примеров реализации подобного чекбокса, но все они мне не нравятся необходимостью использования id и for.
Это не критично, когда чекбоксов будет 1-2. Но если их планируется 5 и более, то уже как-то не охота каждому придумывать и прописывать уникальные имена.
Поэтому для себя сделал простой вариант без использования вышеуказанных аттрибутов.
Данный вариант поддерживает переключение между элементами кнопкой tab и так же переключение значения пробелом.

Для примера сделал 3 варианта кнопки.
Стилизация чекбоксов на CSS

У всех одинаковая html структура:
<label class="checkbox">
	<input type="checkbox" />
	<span>Заголовок чекбокса</span>
</label>
<label class="checkbox">
	<input type="checkbox" checked />
	<span>Заголовок отмеченного чекбокса</span>
</label>
<label class="checkbox">
	<input type="checkbox" disabled />
	<span>Заголовок отключенного чекбокса</span>
</label>

Отличаются только стили.





Демо: sandev.pro/demo/checkbox.html

С уважением,
Олег Александрович a.k.a. Sander
Добавить комментарий
  • Логин
  • E-mail (не обязательно)
Повторите рисунок:
antibot
© Sander-Development. 2009-2018.
При копировании, ссылка на источник обязательна.