Checked dan Disabled

Form yang baik mengumumkan keadaannya sendiri: kotak centang mana yang terpilih, dan isian mana yang tidak boleh disentuh. CSS membaca keadaan tersebut lewat pseudo-class :checked dan :disabled , sehingga umpan balik muncul tanpa satu baris JavaScript. Pada Chapter ini kita memasang keduanya pada checkbox, radio group, dan isian teks, serta membedah perbedaan penting antara keadaan yang hidup dan atribut yang tertulis di HTML.

:checked Mengikuti Keadaan, Bukan Teks Markup #

Atribut checked di HTML hanya menetapkan keadaan awal sebuah checkbox. Setelah pengguna mengeklik, browser memperbarui keadaan itu — dan :checked terus mengikuti keadaan terkini, apa pun yang tertulis pada markup. Perilaku ini berbeda dari selector atribut [checked], yang membaca teks HTML saja dan tidak ikut berubah ketika pengguna mengeklik. Pola paling umum memakai combinator saudara untuk menata label di sebelah kontrol:

.pilihan {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pilihan input {
  width: 18px;
  height: 18px;
  accent-color: rgb(37, 99, 235);
}

.pilihan input:checked + span {
  color: rgb(22, 101, 52);
  font-weight: 600;
}

1. Baris 1–5 (.pilihan): label ditata sebagai baris flex agar kotak centang dan teksnya sejajar.
2. Baris 7–10 (input): accent-color mewarnai kotak centang bawaan browser tanpa perlu menggantinya dengan gambar — fitur ini Baseline sejak 2022.
3. Baris 12–15 (:checked + span): combinator + menunjuk <span> yang berada tepat setelah input; ketika kotak dipilih, teksnya berubah hijau dan tebal.

Tabel ringkas memetakan pseudo-class keadaan yang dibahas pada chapter ini:

:indeterminate pantas disebut karena sering terlewat: keadaan ini tidak tersedia sebagai atribut HTML dan hanya dapat disetel lewat checkbox.indeterminate = true di JavaScript — pola umum untuk checkbox induk pada daftar bertingkat. Sementara itu, untuk penggayaan menyeluruh yang menggantikan tampilan bawaan, jalurnya adalah appearance: none diikuti gaya manual pada input dan combinator :checked + span; pola lengkapnya ada pada Chapter Appearance .

Hasil di Browser:

Label pilihan yang tercentang sejak markup tampil dengan warna rgb(22, 101, 52)
dan font-weight 600. Kotak centang memakai accent-color rgb(37, 99, 235).
Isian terkunci tampil dengan opacity 0.55 dan warna teks rgb(100, 116, 139);
isian aktif tetap opacity 1. Label radio terpilih berwarna rgb(29, 78, 216)
dengan font-weight 600.

:disabled dan :enabled #

:disabled cocok dengan kontrol form yang membawa atribut disabled — kontrol tersebut tidak dapat menerima klik maupun fokus. Kebalikannya adalah :enabled , yang cocok dengan kontrol yang masih dapat berinteraksi. Keduanya mengomunikasikan izin: isian yang terkunci diberi tampilan redup sehingga pengguna tidak membuang waktu mengisinya.

.isian {
  width: 260px;
  padding: 10px 12px;
  border: 1px solid rgb(203, 213, 225);
  border-radius: 8px;
  font: inherit;
  color: rgb(15, 23, 42);
}

.isian:disabled {
  opacity: 0.55;
  color: rgb(100, 116, 139);
  background-color: rgb(241, 245, 249);
  cursor: not-allowed;
}

1. Baris 1–8 (.isian): gaya dasar yang dipakai bersama oleh isian aktif maupun terkunci.
2. Baris 10–14 (:disabled): opacity diturunkan ke 0.55, teks dan latar diabukan, serta kursor not-allowed memberi isyarat tambahan saat kursor berada di atasnya.

Radio Group: Satu Pilihan di Antara Banyak #

Radio group memakai :checked dengan ciri khasnya sendiri: seluruh tombol berbagi atribut name yang sama, dan hanya satu yang berada dalam keadaan terpilih. Dengan combinator +, label pilihan terpilih ikut diberi warna, sementara pilihan lain tetap netral — perpindahan itu terjadi otomatis saat pengguna memilih radio lain, tanpa perhitungan apa pun di skrip.

Uji manual di demo:

1. Klik checkbox kedua yang masih kosong — labelnya langsung berubah hijau dan tebal; klik lagi untuk mengembalikannya.
2. Pilih radio lain pada grup — warna label berpindah ke pilihan terbaru; hanya satu yang menyala.
3. Coba klik isian terkunci — kontrol tidak merespons dan tidak dapat menerima fokus Tab.

Demo chapter ini (checked-disabled.html) membawa lima penanda data-expected pada properti accent-color, color, font-weight, dan opacity.