Checkbox, radio, slider, dan progress bar adalah kontrol yang paling sulit distyle karena gambarnya digambar langsung oleh browser — selama bertahun-tahun satu-satunya jalan keluar adalah menggantinya dengan elemen kustom penuh beserta JavaScript-nya. Properti accent-color menutup sebagian besar kebutuhan itu dengan satu deklarasi: properti ini mengubah warna aksen yang dipakai browser untuk menggambar kontrol native, sehingga checkbox dan slider dapat mengikuti warna brand halaman tanpa kehilangan perilaku maupun aksesibilitas bawaannya.

Satu Properti untuk Banyak Kontrol #

accent-color berlaku pada elemen <input type="checkbox">, <input type="radio">, <input type="range">, <progress>, dan <meter>:

css 
.aksen {
  accent-color: rgb(37, 99, 235);
}

Satu aturan class sederhana ini berlaku serentak pada empat jenis kontrol. Nilai yang dipakai demo adalah biru rgb(37, 99, 235) — warna yang sama dengan tombol primary pada Chapter sebelumnya, sehingga seluruh UI halaman berbicara dengan satu palet:

  1. Baris 2 (accent-color): browser memakai warna ini sebagai warna aksen — kotak centang terisi biru saat dicentang, titik radio berwarna biru, jalur terisi pada slider berwarna biru, dan bilah progress menyusuri warna yang sama.
  2. Dampak turunannya: browser otomatis memilih warna pendamping yang kontras — teks centang pada checkbox gelap tetap terbaca karena browser menghitung warna tanda centangnya sendiri.

Properti ini juga mewarisi: accent-color yang dinyatakan pada <form> atau :root diwarisi seluruh kontrol di dalamnya, sehingga satu deklarasi cukup untuk satu halaman. Keadaan khusus pun ikut tertangani — checkbox dalam keadaan indeterminate (dicentang sebagian, misalnya induk dari daftar tugas) digambar browser dengan tanda garis pada aksen yang sama, tanpa gaya tambahan dari kita.

Hasil di Browser:

text 
Checkbox dan radio bertanda .aksen melaporkan accent-color
rgb(37, 99, 235); slider (range) dengan class yang sama juga
melaporkan nilai aksen yang identik. Kontrol tanpa class tetap
memakai aksen bawaan browser.

Ketiga elemen berclass diprobe otomatis pada demo; status dicentangnya checkbox dan radio diperlihatkan lewat atribut checked agar efek visualnya terlihat begitu halaman dibuka.

Batasan dan Kombinasi dengan color-scheme #

Perlu dipahami bahwa accent-color hanya mengubah aksen: latar kotak input, teks, dan border tetap digambar dengan gaya native browser. Checkbox dengan aksen merah masih memiliki kotak berlatar putih dan border abu-abu bawaan. Bila tujuannya menggelapkan keseluruhan kontrol — misalnya pada halaman bertema gelap — kombinasikan dengan color-scheme: dark, yang menginstruksikan browser menggambar kontrol dengan skema gelap, lalu accent-color tetap menentukan warna sorotannya.

Untuk komponen yang menuntut kendala visual penuh — kotak centang berbentuk pil, slider bertema khusus — jalan tetap ke appearance: none yang dibahas pada Chapter Appearance . Namun mulailah dari pertanyaan sederhana: apakah kebutuhan tersebut benar-benar ada? Dalam banyak kasus, accent-color menyediakan 90% manfaat visual dengan 1% usaha, dan kontrol tetap sepenuhnya milik browser: fokus keyboard, peran screen reader, dan perilaku sentuhnya tidak perlu dijaga manual.

Sebagai penutup, kaitkan warna aksen dengan token desain halaman. Bila palet CSS halaman memakai custom property — misalnya --warna-aksi: rgb(37, 99, 235) — cukup tulis accent-color: var(--warna-aksi); ketika brand berganti warna, checkbox, radio, slider, dan tombol primary bergaya serentak dari satu tempat. Keselarasan kecil semacam ini yang membuat kontrol native terasa bagian dari desain, bukan tempelan dari browser.