Псевдокласс 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;
}
: