: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

Sıradaki ders: Özet - Etkileşimli liste

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler