Вёрстка Middle Вёрстка на практике обновлено
Свой чекбокс
Условие
Нативный чекбокс скрыт, но остаётся доступным с клавиатуры. Видимый квадрат .mark меняет цвет фона, когда чекбокс отмечен. Разметку менять нельзя.
Что проверяют тесты
нативный чекбокс не виден, но существует
отмеченное состояние красит квадрат
снятие меняет вид
чекбокс фокусируем
Как подойти
Связка :checked + соседний селектор - то, ради чего задача даётся: состояние формы выражается стилями, JavaScript не нужен вовсе. Скрытие через opacity вместо display сохраняет фокусируемость и работу с клавиатуры. Оборачивание в label делает кликабельным весь блок без атрибута for. Для полноты не хватает стиля :focus-visible - назвать стоит.
Подсказки: 3
- Скрывать чекбокс надо так, чтобы он оставался фокусируемым.
- Соседний элемент выбирается комбинатором +.
- Псевдокласс :checked даёт состояние без единой строчки JavaScript.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.