HTML: Стилизация checkbox

Обновлено: 05 мая, 23:20
828
Студентов
79%
Завершения

В большинстве дизайнов используются интерактивные элементы, отличные от тех, которые по умолчанию есть в браузере. Такими элементами являются кнопки, чекбоксы, радиокнопки, список с множественным выбором и так далее. И если для кнопок сделать собственное оформление просто, то с такими элементами, как чекбоксы всё немного сложнее.

Браузеры не позволяют полностью кастомизировать такие элементы, поэтому разработчики скрывают реальный элемент и, на его месте, создают элемент с похожим поведением.

В этом задании вам предстоит создать собственный чекбокс с уникальным дизайном

Кастомный CheckBox

Основной алгоритм создания кастомного чекбокса состоит из:

  1. Скрытия элемента <input>
  2. Добавление элемента <label> и его связь с <input>
  3. Так как <label> и <input> связаны друг с другом, то клик по <label> приведёт к изменению состояния checked для <input>
  4. С помощью псевдоэлемента создаётся свой дизайн чекбокса
  5. В CSS указывается внешний вид для псевдоэлемента при активном состоянии checked у <input> и при неактивном состоянии

app.css

Используя доступные переменные создайте кастомный чекбокс по макету выше. Для состояния :hover используется тот же фон, что и в переменной --checkbox-checked, но полупрозрачный.

Подсказки

  • Для стилизации активного чекбокса используйте псевдокласс :checked
  • Для создания полупрозрачности используйте свойство opacity со значением 0.5
  • Для <label> добавьте свойство cursor со значением pointer
  • Для псевдоэлемента используйте свойство top: 0. Это поможет правильно его разместить относительно элемента label

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов