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


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

У всех одинаковая 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>

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


 
 
Автор: Sander
Источник:
  • Oxigen
  • 0
  • 532
Информация
Оставлять комментарии могут только зарегистрированные посетители.
  • Рейтинг@Mail.ru
  • Яндекс.Метрика