Pseudo-class checked
Pseudo-class checked memungkinkan untuk menangkap
checkbox
atau radio yang dicentang.
Sayangnya, gaya untuk mendekorasinya tidak dapat diatur. Sebagai contoh, tidak dapat mengatur latar belakang atau warna border (dapat mengatur, misalnya, lebar dan tinggi, tetapi pengaruhnya tidak akan seperti yang diharapkan).
Meskipun demikian, gaya untuk elemen-elemen yang berdekatan
dapat diatur, contohnya seperti ini: input:checked + p
- kita akan mengatur gaya untuk paragraf, yang
berada tepat di bawah input yang dicentang.
Sintaks
elemen:checked {
}
Contoh
Cobalah centang checkbox-checkbox tersebut dan Anda akan melihat bagaimana
label label menyala
dengan warna merah,
yang berada tepat
setelah checkbox yang dicentang:
<input type="checkbox" id="elem1">
<label for="elem1">label 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">label 2</label>
input:checked + label {
color: red;
}
:
Contoh
Cobalah centang radio dan Anda akan melihat bagaimana
label label menyala dengan warna merah, yang
berada tepat setelah switch
yang dicentang:
<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>
input:checked + label {
color: red;
}
:
