Checked-pseudoluokka

Pseudoluokka checked mahdollistaa valitun valintaruudun tai radio-painikkeen kiinniotton.

Valitettavasti niiden koristelutyylejä ei voi määrittää. Esimerkiksi ei voi asettaa taustaa tai reunan väriä (voi asettaa esimerkiksi leveyden ja korkeuden, mutta niillä ei ole odotettua vaikutusta).

Siitä huolimatta voi asettaa tyylejä viereisille elementeille, esimerkiksi näin: input:checked + p - asetamme tyylit kappaleelle, joka sijaitsee suoraan valitun input-elementin alla.

Syntaksi

csselementti:checked {
  
}

Esimerkki

Valitse valintaruutuja ja näet, kuinka label-nimikkeet saavat punaisen värin, jotka sijaitsevat suoraan valittujen valintaruutujen jälkeen:

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

cssinput:checked + label {
  color: red;
}

Результат:

Esimerkki

Valitse radio-painikkeita ja näet, kuinka label-nimikkeet saavat punaisen värin, jotka sijaitsevat suoraan valitun radiovaihtoehdon jälkeen:

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

cssinput:checked + label {
  color: red;
}

Результат: