Warna aksen CSS

Tambahkan warna merek Anda ke input formulir HTML bawaan dengan satu baris kode.

Adam Argyle
Joey Arhar
Joey Arhar
X GitHub

Elemen formulir HTML saat ini sulit untuk disesuaikan. Rasanya seolah-olah ini adalah pilihan antara sedikit atau tanpa gaya kustom, atau mereset gaya input dan membangunnya dari awal. Membuatnya dari awal akhirnya menjadi lebih banyak pekerjaan dari yang diperkirakan. Hal ini juga dapat menyebabkan terlupakannya gaya untuk status elemen (tidak pasti, saya melihat Anda), dan hilangnya fitur aksesibilitas bawaan. Untuk membuat ulang konten yang disediakan browser sepenuhnya, mungkin akan ada lebih banyak pekerjaan daripada yang ingin Anda lakukan.

accent-color: hotpink;

accent-color CSS dari spesifikasi UI CSS hadir untuk menambahkan tint pada elemen dengan satu baris CSS, sehingga Anda tidak perlu melakukan penyesuaian dengan memberikan cara untuk menghadirkan merek Anda ke dalam elemen.

Dukungan Browser

  • 93
  • 93
  • 92
  • 15,4

Sumber

Screenshot tema terang dari demo warna aksen dengan kotak centang, tombol pilihan, penggeser rentang, dan elemen progres semuanya berwarna hotpink.
Demo

Properti accent-color juga berfungsi dengan color-scheme, yang memungkinkan penulis menambahkan tint pada elemen terang dan gelap. Pada contoh berikut, pengguna memiliki tema gelap aktif, halaman menggunakan color-scheme: light dark, dan menggunakan accent-color: hotpink yang sama untuk kontrol tint hotpink bertema gelap.

Screenshot tema gelap dari demo warna aksen dengan kotak centang, tombol pilihan, penggeser rentang, dan elemen progres semuanya berwarna hotpink.
Demo

Elemen yang didukung

Saat ini, hanya empat elemen yang akan menambahkan tint melalui properti accent-color: kotak centang, radio, rentang, dan progres. Masing-masing dapat dilihat di sini https://accent-color.glitch.me dalam skema warna terang dan gelap.

Kotak centang

Radio

Rentang

Progres

Menjamin kontras

Untuk mencegah elemen yang tidak dapat diakses agar tidak ada, browser dengan accent-color harus menentukan warna kontras yang memenuhi syarat untuk digunakan bersama aksen kustom. Di bawah ini adalah screenshot yang menunjukkan perbedaan antara Chrome 94 (kiri) dan Firefox 92 Nightly (kanan) dalam algoritmenya:

Screenshot Firefox dan Chromium berdampingan, yang merender spektrum penuh kotak centang dalam berbagai corak warna dan kegelapan.

Hal terpenting yang perlu diperhatikan adalah memercayai browser. Berikan warna merek, dan rasakan bahwa warna tersebut akan membuat keputusan yang cerdas untuk Anda.

Tambahan: Lebih banyak tint

Anda mungkin bertanya-tanya cara mewarnai lebih dari empat elemen bentuk ini? Berikut sandbox minimal yang menambahkan tint:

  • cincin fokus
  • sorotan pemilihan teks
  • mencantumkan penanda
  • indikator panah (khusus Webkit)
  • thumb scrollbar (khusus Firefox)
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Potensi masa depan

Spesifikasi ini tidak membatasi penerapan accent-color pada empat elemen yang ditampilkan dalam artikel ini. Dukungan lainnya dapat ditambahkan nanti. Elemen seperti <option> yang dipilih dalam <select> dapat ditandai dengan accent-color.

Apa lagi yang Anda suka tambahkan tint di web? Kirimkan tweet @argyleink kepada pemilih Anda agar pemilih tersebut akan ditambahkan ke artikel ini.