HTML: Стилизация 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