:checked
Срабатывает у отмеченного флажка или переключателя и у выбранного `<option>`.
Синтаксис
input:checked { … }Примеры
Отмеченное дело зачёркивается:
<style>
input:checked + span { text-decoration: line-through; color: gray; }
</style>
<label><input type="checkbox"> <span>Buy milk</span></label><br>
<label><input type="checkbox" checked> <span>Walk the dog</span></label>Примечания
:checked реагирует на щелчки без всякого JavaScript, поэтому на нём строят простые переключатели. Чтобы оформить саму подпись, а не текст после поля, используйте label:has(:checked).
См. также
- :has() — Выбирает элемент, внутри которого есть что-то подходящее под селектор в скобках, — «селектор родителя».
- accent-color — Акцентный цвет встроенных элементов формы: флажков, переключателей, ползунков и индикаторов.
- <input> — Поле ввода; вид поля задаёт атрибут `type`.
Вопросы и ответы по теме
В учебнике
- Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.