Псевдокласс checked позволяет поймать отмеченный чекбокс или radio. К сожалению, стили для их украшения задать нельзя. К примеру нельзя задать фон или цвет границы (можно задавать, к примеру, ширину и высоту, но они окажут не такое влияние, как можно было бы ожидать).

Несмотря на это, можно задать стили для соседних элементов, например, так: input:checked+p - зададим стили для абзаца, который находится непосредственно под отмеченным инпутом.

См. также атрибут checked, который делает отмеченным по умолчанию флажок чекбокс или радио переключатель.

См. также псевдоклассы disabled и enabled, которые задают стили заблокированным и незаблокированным элементам.

Синтаксис

input:checked {
	
}

Примеры

Пример

Поотмечайте чекбоксы и radio и вы увидите как загораются красным цветом метки label, которые находятся непосредственно после отмеченных элементов:

<input type="checkbox" checked id="checkbox1"><label for="checkbox1">Первый чекбокс</label><br>
<input type="checkbox" id="checkbox2"><label for="checkbox2">Второй чекбокс</label><br>
<input type="radio" id="radio1" name="radio"><label for="radio1">Радио</label>
<input type="radio" id="radio2" name="radio"><label for="radio2">Радио</label>
input:checked+label {
	color: red;
}

Результат выполнения кода: