Tambahkan warna merek Anda ke input formulir HTML bawaan dengan satu baris kode.
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.
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.
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:
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.