:checked dan :disabled

Kontrol form membawa state yang tidak dimiliki tombol biasa: sebuah checkbox bisa tercentang atau tidak, dan sebuah tombol kirim bisa dinonaktifkan. CSS menyediakan pseudo-class khusus untuk keadaan-keadaan itu — :checked, :disabled, :enabled, dan :indeterminate — sehingga umpan baliknya bisa ditata langsung dari stylesheet. Pada chapter ini kita menata keduanya, lalu mengintip pola label plus input yang menjadi fondasi kontrol kustom.

:checked pada Checkbox dan Radio #

Pseudo-class :checked mencocokkan <input type="checkbox"> dan <input type="radio"> yang sedang tercentang, termasuk <option> yang terpilih. Cara paling sederhana untuk memberi warna adalah property accent-color, yang mengatur warna aksen kontrol bawaan browser:

.pilihan-langganan input {
  accent-color: #1f6f54;
}

Cara ini memberi warna aksen tanpa perlu meniru bentuk kontrol bawaan browser sama sekali; property ini akan kita gunakan lebih dalam pada section Styling Forms dan Controls.

Untuk grup radio, satu attribute name yang sama menyatukan pilihan-pilihannya: hanya satu yang bisa tercentang, dan yang lain otomatis melepas state-nya. Pseudo-class :checked tetap menangani semuanya tanpa aturan tambahan:

.opsi-ukuran input:checked + .label-ukuran {
  border-color: #1f6f54;
  box-shadow: inset 0 0 0 1px #1f6f54;
}

Karena perpindahan state diurus browser, tidak ada logika JavaScript yang perlu ditulis untuk state dasar ini. Mengklik teks label apa pun di dalam .opsi-ukuran juga tetap men-toggle radio-nya, karena label terhubung dengan input yang dibungkusnya.

Klik salah satu ukuran berikut, lalu pindahkan pilihanmu ke ukuran lain:

Pola label + input untuk Seleksi yang Ditata Sendiri #

Ketika tampilan bawaan tidak cukup, pola yang dipakai adalah memasangkan input dengan label, lalu menata label berdasarkan state input melalui sibling selector dari section Selectors:

.opsi-paket input:checked + .nama-paket {
  color: #14503a;
  font-weight: 700;
}

HTML-nya berupa input dan label yang bersebelahan:

<label class="opsi-paket">
  <input type="checkbox" name="paket">
  <span class="nama-paket">Paket Bulanan</span>
</label>

Input tetap ada di markup sehingga tetap bisa dioperasikan keyboard dan terbaca pembaca layar; hanya tampilan label yang kita ubah. Pola ini pula yang menjadi dasar custom switch dan toggle yang akan kita bangun di section Styling Forms dan Controls.

:disabled dan :enabled #

Attribute disabled pada kontrol form membuat kontrol tidak bisa dioperasikan. Pseudo-class :disabled mencocokkan kontrol dalam keadaan itu, sedangkan :enabled mencocokkan kontrol yang bisa dioperasikan:

.tombol-kirim:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tombol-kirim:enabled {
  background-color: #1f6f54;
}

Konvensi tampil pudar pada kontrol nonaktif sudah dipahami pengguna secara luas, sehingga layak dipertahankan. Aturan :enabled boleh ditinggalkan bila tidak ada gaya khusus yang diperlukan — kontrol yang tidak cocok dengan :disabled memang otomatis tampil normal.

Tiga perilaku browser yang perlu diingat tentang kontrol disabled:

• Kontrol tidak menerima event klik, sehingga tooltip dan gaya hover-nya juga tidak muncul.
• Kontrol dilewati dalam navigasi Tab.
• Form tidak mengirimkan nilai dari kontrol yang disabled saat disubmit.

Karena itu, state :disabled sebaiknya dipakai ketika aksi memang tidak boleh dijalankan; bila tujuannya hanya menunda, pertimbangkan pesan validasi yang bisa dibaca.

Jangan tertukar pula antara disabled dan attribute readonly pada input teks: keduanya membatasi penyuntingan, tetapi kolom readonly masih bisa difokus, nilainya tetap ikut terkirim, dan kolom itu tidak cocok dengan :disabled — statusnya tetap :enabled.

Demo penutup memadukan :checked dan :disabled pada satu komponen:

:indeterminate Secara Singkat #

Selain tercentang dan tidak, sebuah checkbox juga bisa berada di keadaan ketiga: :indeterminate, yang biasanya menampilkan tanda strip. Keadaan ini hanya bisa diatur lewat JavaScript melalui property input.indeterminate, umumnya untuk checkbox induk yang sebagian anaknya tercentang. Grup radio yang belum ada pilihan terpilihnya juga cocok dengan :indeterminate. Pseudo-class ini jarang dibutuhkan, cukup dikenali bentuknya.

Ringkasan #

:checked menangkap keadaan tercentang pada radio dan checkbox, :disabled dan :enabled menangkap kesiapan operasi sebuah kontrol, dan :indeterminate melengkapi keadaan ketiga yang diatur lewat JavaScript. Pola label plus input dengan sibling selector membuka jalan menuju kontrol kustom yang tetap aksesibel. Chapter berikutnya meninggalkan state form dan pindah ke pseudo-class struktural: memilih elemen berdasarkan posisinya di antara saudara-saudaranya.