Pseudo-class checked

Pseudo-class checked membolehkan kita menangkap kotak semak atau radio yang ditanda.

Malangnya, gaya untuk menghiasnya tidak boleh ditetapkan. Sebagai contoh, kita tidak boleh menetapkan latar belakang atau warna sempadan (kita boleh menetapkan, sebagai contoh, lebar dan tinggi, tetapi ia tidak akan memberikan kesan seperti yang dijangkakan).

Walaupun begitu, kita boleh menetapkan gaya untuk elemen bersebelahan, contohnya seperti ini: input:checked + p - kita akan menetapkan gaya untuk perenggan, yang terletak terus di bawah input yang ditanda.

Sintaks

csselemen:checked {
  
}

Contoh

Tandai kotak semak dan anda akan melihat bagaimana label label menyala dengan warna merah, yang terletak terus selepas kotak semak yang ditanda:

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

cssinput:checked + label {
  color: red;
}

Результат:

Contoh

Tandai radio dan anda akan melihat bagaimana label label menyala dengan warna merah, yang terletak terus selepas butang radio yang ditanda:

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

cssinput:checked + label {
  color: red;
}

Результат: