Кастомный checkbox средствами HTML и CSS (no-js) #2
Давайте разберем создание классного checkbox с двумя кнопками переключения без использования JavaScript.
Для начала воспользуемся одним из свойств элемента label в HTML: клики по связанному с input label взаимодействуют с input. Связать input и label можно двумя способами: определив аттрибуты name и for соответственно или же поместить активный элемент внутрь label.
- Выберем второй вариант. Первым шагом обернем checkbox в label:
Важно поместить checkbox самым первым внутри label, т.к. от его состояния будет зависеть отрисовка остальных элементов.
2. Базовый набор уже готов. Обернем текст внутри label в отдельный span для удобства стилизации, добавим существующим элементам классы:
3. Так как мы будем отрисовывать переключатель по-своему, то скроем стандартный input. Также добавим недостающих элементов для кнопок-переключателей checkbox вместе с классами:
4. Стилизуем текущие элементы для желаемого отображения.
Убираем pointer-events у всего label и обертки для кнопок .parts, оставляя pointer-events только для кнопок .part, чтобы пользователь не заставил меняться checkbox при случайном нажатии не туда. Добавляем стили для наших кнопок в статике и при наведении (hover). Не забываем про изменение состояния курсора при наведении:
5. Теперь самое интересное: стилизуем кнопки в зависимости от состояния checkbox. Учитываем, что мы не хотим кликов по активной кнопке также как по области всего label, а только по неактивной, чтобы создать интересный элемент переключения, который будет понятным для пользователя. Для этого воспользуемся general sibling комбинатором ~ и, в зависимости от состояния checkbox [:checked или :not(:checked)] будем отрисовывать кнопки:
Готово!
Такой checkbox является одним из самых понятных вариантов для переключения между двумя состояниями, хотя и занимает много места. Этому можно найти практическое применение в случаях, где состояние играет большую роль при действиях пользователя, как, например, при переключении темы. Но это уже другая история.
Спасибо за прочтение, увидимся в следующей статье
kyoshee
