HTML: Стилизация checkbox
В большинстве дизайнов используются интерактивные элементы, отличные от тех, которые по умолчанию есть в браузере. Такими элементами являются кнопки, чекбоксы, радиокнопки, список с множественным выбором и так далее. И если для кнопок сделать собственное оформление просто, то с такими элементами, как чекбоксы всё немного сложнее.
Браузеры не позволяют полностью кастомизировать такие элементы, поэтому разработчики скрывают реальный элемент и, на его месте, создают элемент с похожим поведением.
В этом задании вам предстоит создать собственный чекбокс с уникальным дизайном
Основной алгоритм создания кастомного чекбокса состоит из:
- Скрытия элемента
<input>
- Добавление элемента
<label>
и его связь с<input>
- Так как
<label>
и<input>
связаны друг с другом, то клик по<label>
приведёт к изменению состоянияchecked
для<input>
- С помощью псевдоэлемента создаётся свой дизайн чекбокса
- В CSS указывается внешний вид для псевдоэлемента при активном состоянии
checked
у<input>
и при неактивном состоянии
app.css
Используя доступные переменные создайте кастомный чекбокс по макету выше. Для состояния :hover
используется тот же фон, что и в переменной --checkbox-checked
, но полупрозрачный.
Подсказки
- Для стилизации активного чекбокса используйте псевдокласс
:checked
- Для создания полупрозрачности используйте свойство
opacity
со значением0.5
- Для
<label>
добавьте свойствоcursor
со значениемpointer
- Для псевдоэлемента используйте свойство
top: 0
. Это поможет правильно его разместить относительно элементаlabel
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.