Menerapkan tema pada UI yang dihasilkan browser

Sebagian besar UI yang dihasilkan browser dapat disesuaikan sampai batas tertentu menggunakan CSS. Meskipun memerlukan fitur modern, fitur ini akan menurun secara halus di browser lama, sehingga sering kali tidak memerlukan polyfill atau penggantian.

Sebelum membuat ulang UI browser (kontrol formulir, scrollbar, pilihan, pesan error, dll.), pastikan terlebih dahulu bahwa:

1. UI browser tidak dapat disesuaikan dengan kebutuhan Anda, bahkan dengan CSS modern,
2. penyesuaian yang diinginkan cukup penting untuk mengimbangi konsekuensi pembuatan ulang UI bawaan — terutama kehilangan semantik yang dapat diakses, penanganan keyboard, IME, dan integrasi AT yang disediakan UI native secara gratis.

Contoh penyesuaian yang dapat dilakukan:

• Gunakan ::selection untuk menyesuaikan warna teks yang ditandai.
• JANGAN terapkan user-select: none ke teks konten — merusak fungsi salin-tempel, alat terjemahan, dan gestur "baca dari sini" AT. Batasi pada chrome (gagang tarik, toolbar, label tombol yang redundan).
• Gunakan accent-color untuk menerapkan warna aksen halaman ke UI apa pun yang dihasilkan browser.
• Gunakan color-scheme agar UI browser beradaptasi dengan mode terang/gelap.
• Gunakan scrollbar-color untuk menyesuaikan warna scrollbar dan scrollbar-width untuk mengontrol ketebalan scrollbar — pastikan thumb terlihat jelas dari track (≥3:1), dan jangan tetapkan scrollbar-width: none pada area yang dapat di-scroll (gunakan hanya jika scroll sepenuhnya digantikan oleh affordance lain).
• Gunakan :user-invalid/:user-valid untuk gaya validitas, bukan :invalid/:valid — keduanya hanya cocok setelah pengguna berinteraksi dengan kolom, sehingga menghindari default yang tidak diinginkan, yaitu menandai kolom wajib diisi yang kosong sebagai error saat pemuatan halaman. Kecualikan penggeser rentang saat menargetkan input secara luas (misalnya, input:not(input[type="range"]):user-valid) sehingga penyesuaian penggeser tidak menerapkan batas atau latar belakang validitas kolom ke penggeser tersebut.
• Tombol dan kolom teks (termasuk <textarea>) umumnya dapat diberi gaya sebagai elemen normal.
• Gunakan font-size untuk menskalakan dan properti tekstual lainnya untuk mengontrol tipografi

Menata gaya kolom tekstual (<input> & <textarea>)

Untuk sebagian besar tujuan penataan gaya (misalnya, warna, batas, latar belakang, tipografi, dll.), perlakukan elemen ini sebagai penampung teks biasa.

• Gunakan :placeholder-shown dan ::placeholder untuk menata gaya placeholder input.
• Gunakan field-sizing: content untuk membuat ukuran kolom teks sesuai dengan konten.
• Untuk elemen <textarea>, gunakan resize: vertical untuk menonaktifkan pengubahan ukuran horizontal atau resize: none untuk menonaktifkan semua pengubahan ukuran.

Kontrol pilihan ganda (pilih, tombol pilihan, kotak centang)

• Untuk memilih salah satu dari banyak opsi yang ditampilkan dalam dropdown: Gunakan <select> + appearance: base-select + ::picker(select). Untuk mengetahui info selengkapnya, lihat Gaya Visual Bermerek
• Memilih satu atau beberapa opsi di antara beberapa opsi yang diletakkan secara inline di halaman: Gunakan <input type=checkbox> atau <input type=radio> di dalam <label> untuk setiap opsi. Gaya melalui label:has(:checked).
• Gaya kotak centang, tombol pilihan, dan tombol akses melalui appearance: none + konten yang dihasilkan (::before/::after) atau gambar latar untuk menggambar status yang dicentang.

<input> non-tekstual (tombol, penggeser, input file, dll.)

• Input file: Gunakan ::file-selector-button untuk menata gaya tombol.
• Jangan gunakan <input> dengan type dari button, submit, atau reset. Gunakan <button> dan beri gaya sebagai elemen reguler.
• Penggeser: Gunakan pseudo-elemen thumb appearance: none + (::-webkit-slider-thumb, ::-moz-range-thumb, dll.) dan pseudo-elemen track (::-webkit-slider-runnable-track, ::-moz-range-track, dll.) untuk kontrol yang lebih terperinci.