Pseudo klasė checked

Pseudo klasė checked leidžia pasiimti pažymėtą varnelę arba radio mygtuką.

Deja, jų dekoravimo stilius nustatyti negalima. Pavyzdžiui, negalima nustatyti fono arba krašto spalvos (galima nustatyti, pavyzdžiui, plotį ir aukštį, tačiau jie turės ne tokį poveikį, kokio galima būtų tikėtis).

Nepaisant to, galima nustatyti stilius gretimiems elementams, pavyzdžiui, taip: input:checked + p - nustatysime stilius pastraipai, kuri yra tiesiai po pažymėtu įvesties lauku.

Sintaksė

csselementas:checked {
  
}

Pavyzdys

Pažymėkite varneles ir pamatysite, kaip užsidega raudona spalva label ženklai, kurie yra tiesiai po pažymėtų varnelių:

html<input type="checkbox" id="elem1">
<label for="elem1">ženklas 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">ženklas 2</label>

cssinput:checked + label {
  color: red;
}

Результат:

Pavyzdys

Pažymėkite radio mygtukus ir pamatysite, kaip užsidega raudona spalva label ženklai, kurie yra tiesiai po pažymėto perjungimo mygtuko:

html<input type="radio" name="elem" id="elem1">
<label for="elem1">ženklas 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">ženklas 2</label>

cssinput:checked + label {
  color: red;
}

Результат: