Псевдокласс checked

Псевдокласс checked позволяет поймать отмеченный чекбокс или radio.

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

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

Синтаксис

элемент:checked {
	
}

Пример

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

<input type="checkbox" id="elem1">
<label for="elem1">метка 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">метка 2</label>

input:checked + label {
	color: red;
}

Пример

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

<input type="radio" name="elem" id="elem1">
<label for="elem1">метка 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">метка 2</label>

input:checked + label {
	color: red;
}