Псеўдаклас checked

Псеўдаклас checked дазваляе злавіць адзначаны чэкбокс ці радыё.

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

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

Сінтаксіс

cssэлемент:checked {
  
}

Прыклад

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

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

cssinput:checked + label {
  color: red;
}

Результат:

Прыклад

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

html<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>

cssinput:checked + label {
  color: red;
}

Результат: