Pseudoklass checked

Pseudoklass checked võimaldab püüda märgitud märkeruutu või radio.

Kahjuks ei saa nende kaunistamiseks stiile määrata. Näiteks ei saa määrata tausta või piirjoone värvi (saab määrata näiteks laiuse ja kõrguse, kuid need ei avalda sellist mõju, nagu võiks oodata).

Sellele vaatamata saab stiile määrata naaberelementidele, näiteks nii: input:checked + p - määrame stiilid lõigule, mis asub otse märgitud inputi all.

Süntaks

csselement:checked {
  
}

Näide

Märkige märkeruudud ja näete, kuidas punaselt hoojavad label sildid, mis asuvad otse märgitud märkeruutude järel:

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

cssinput:checked + label {
  color: red;
}

Результат:

Näide

Märkige radio ja näete, kuidas punaselt hoojavad label sildid, mis asuvad otse märgitud lüliti järel:

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

cssinput:checked + label {
  color: red;
}

Результат: