:checked ve :disabled
:checked ve :disabled sözde sınıflarını öğrenirsin.
:checked nedir?
:checked sözde sınıfı, o anda seçili durumda olan form denetimlerini yakalar: onay kutuları, radyo düğmeleri ve seçenek menülerini.
Örneğin input:checked + label { color: green; } yazarsan, işaretli kutunun yanındaki etiket yeşil olur. Bu, JavaScript olmadan görsel geri bildirim vermenin zarif bir yoludur.
Sözde sınıf yalnızca denetimin durumunu izler; kullanıcının tıklamasını değiştirmez.
:disabled nedir?
:disabled sözde sınıfı, HTML disabled özniteliği taşıyan form denetimlerini yakalar. Bunlar tıklanamaz ve veri göndermez.
Devre dışı bir düğmeyi görsel olarak da belirtmek iyi bir uygulamadır. button:disabled { opacity: 0.5; cursor: not-allowed; } yazarsan, düğme yarı saydam görünür ve fare imleci 'yasak' simgesine döner. Kullanıcı niçin tıklayamadığını anlar.
Diğer form durumu sözde sınıfları
Form denetimleri için başka sözde sınıflar da vardır:
:enabled— tıklanabilir, aktif denetim:read-only— düzenlenemez alan:placeholder-shown— yer tutucu hâlâ görünür:focus-visible— klavyeyle odaklanmış, fareyle değil
Bunları bir arada kullanarak formunuzun her durumunu ayrı ayrı biçimlendirebilirsin. Örneğin :focus-visible yalnızca klavye odaklarında çerçeve gösterip fare tıklamalarında gizleyerek görsel gürültüyü azaltır.
Uygulama İşaretli kutu ve devre dışı düğme biçimlendir
İki bildirim yaz. Birincisi input:checked seçicisi, içine accent-color: green. İkincisi button:disabled seçicisi, içine opacity: 0.5. Her ikisi de kendi { } bloğunda olsun.
Örnek çözümü göster
/* işaretli kutu ve devre dışı düğme stillerini ekle */
input:checked {
accent-color: green;
}
button:disabled {
opacity: 0.5;
}Kendini test et
-
input:checked hangi öğeleri eşleştirir?
input:checked + label { color: green; }- Yalnızca radyo düğmelerini
- O anda işaretli olan onay kutusu ve radyo düğmelerini
- Tüm input öğelerini
- Devre dışı bırakılmış alanları
Cevabı göster
O anda işaretli olan onay kutusu ve radyo düğmelerini — Doğru. :checked, o an seçili olan denetimleri yakalar.
-
Devre dışı düğme için seçici yaz
button____ { opacity: 0.5; cursor: not-allowed; }Cevabı göster
button:disabled { opacity: 0.5; cursor: not-allowed; } -
Form durumunu sözde sınıfla eşleştir
- :checked
- İşaretli kutu
- :disabled
- Devre dışı alan
- :focus
- Odaklanmış input
- :hover
- Fare üzerinde