Ketika accent-color tidak lagi cukup — panah select harus diganti, kotak centang harus berbentuk pil — properti appearance menjadi alat berikutnya. Deklarasi appearance: none menginstruksikan browser berhenti menggambar tampilan native kontrol dan menyerahkan seluruh gambarnya kepada CSS. Fitur ini merupakan Baseline sejak 2022, tetapi kekuatannya datang bersama tanggung jawab: begitu tampilan native dihapus, kita yang harus menggambar ulang setiap keadaan — termasuk keadaan fokus — tanpa boleh mengabaikan semantik elemennya.

Apa yang Hilang Saat appearance: none #

Dampak appearance: none berbeda untuk setiap kontrol. Pada <select>, panah bawaan menghilang dan kontrol menyisih menjadi kotak polos — ruang yang tepat untuk panah kustom. Pada <input type="checkbox">, seluruh gambar kotak centang menghilang: tanpa gaya tambahan, kotak tersebut tak terlihat sama sekali meski tetap bisa diklik. Pada slider, jalur dan pegangannya ikut tiada. Karena itu kebiasaan yang sehat: terapkan appearance: none hanya pada kontrol yang memang akan digambar ulang, dan selalu sertakan gaya keadaan :checked serta :focus-visible.

Select dengan Panah Kustom #

Kasus pemakaian appearance: none yang paling umum adalah select berpanah sendiri. Panah digambar sebagai gambar latar berformat SVG yang disematkan lewat data URI:

css 
.select-custom {
  appearance: none;
  font: inherit;
  padding: 10px 36px 10px 12px;
  border: 2px solid rgb(203, 213, 225);
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23334155' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

Mari kita telaah bagian per bagian:

  1. Baris 2 (appearance: none): panah dan tepi native select dihapus; tanpa baris ini, deklarasi lain hanya menghiasi di sekitar gambar bawaan.
  2. Baris 3 (font: inherit): teks opsi mengikuti font halaman, konsisten dengan pembahasan Chapter Styling Inputs .
  3. Baris 4 (padding: 10px 36px 10px 12px): padding kanan sengaja 36px — lebih lebar dari padding kiri — untuk menyisakan ruang bagi panah.
  4. Baris 8 (background-image): gambar SVG chevron kecil disematkan langsung sebagai data URI; karakter <, >, dan # di-escape menjadi %3C, %3E, dan %23 agar URL tetap valid.
  5. Baris 9–10 (no-repeat, position): panah digambar sekali, diposisikan 12px dari tepi kanan dan dipusatkan secara vertikal.

Hasil di Browser:

text 
Select kustom melaporkan appearance "none" dengan padding atas
10px; checkbox kustom yang dicentang juga melaporkan appearance
"none" dengan latar rgb(37, 99, 235) dari aturan :checked.
Select pembanding tanpa appearance tetap "auto" dengan panah bawaan.

Dua nilai appearance, padding, dan latar checkbox diprobe otomatis pada demo.

Checkbox Kustom dan Batas Aksesibilitas #

Untuk checkbox, appearance: none digabung dengan :checked:

css 
.cb-custom {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(100, 116, 139);
  border-radius: 4px;
}

.cb-custom:checked {
  background-color: rgb(37, 99, 235);
  border-color: rgb(37, 99, 235);
}

Kunci dari pola ini adalah elemen yang diberi gaya tetap elemen <input type="checkbox"> asli — bukan <div> yang meniru kotak centang. Selama elemen aslinya dipertahankan, klik pada label tetap berfungsi, status tercentang tetap dilaporkan ke screen reader, dan Tab tetap dapat menjangkaunya.

Slider <input type="range"> mengikuti resep yang sama dengan cakupan yang lebih luas: appearance: none pada slider menghapus jalur sekaligus pegangannya, dan kedua bagian itu digambar ulang lewat pseudo-element khusus per browser (::-webkit-slider-thumb, ::-moz-range-thumb), sehingga biaya perawatannya jauh lebih tinggi daripada checkbox. Pertimbangkan ulang kebutuhan sebelum memilih jalan ini — bila tujuannya sekadar mengubah warna, accent-color pada Chapter sebelumnya menyelesaikannya tanpa menyentuh satu pun pseudo-element.

Dengan urutan peralatan yang lengkap — accent-color untuk pewarnaan cepat, appearance: none untuk kendali penuh — pilihlah tingkat kustomisasi sekecil kebutuhan, dan sisakan selebihnya pada kontrol native yang telah diuji browser terhadap puluhan skenario interaksi.