Pseudo-class checked

checked pseudo-class'ı işaretlenmiş onay kutusu veya radio düğmesini yakalamayı sağlar.

Maalesef, bunları süslemek için stiller tanımlanamaz. Örneğin arka plan veya kenarlık rengi tanımlanamaz (örneğin genişlik ve yükseklik tanımlanabilir, ancak beklenildiği gibi bir etki göstermezler).

Buna rağmen, komşu elementler için stiller tanımlanabilir, örneğin şu şekilde: input:checked + p - işaretlenmiş input'un hemen altındaki paragrafa stil tanımlayalım.

Sözdizimi

element:checked {
	
}

Örnek

Onay kutularını işaretleyin ve işaretlenmiş onay kutularının hemen ardından gelen label etiketlerinin kırmızı renkle nasıl yandığını göreceksiniz:

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

input:checked + label {
	color: red;
}

Örnek

radio düğmelerini işaretleyin ve işaretlenmiş düğmenin hemen ardından gelen label etiketlerinin kırmızı renkle nasıl yandığını göreceksiniz:

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

input:checked + label {
	color: red;
}