Gaya Pilihan Bermerek

Fitur web: <select> yang dapat disesuaikan

API pilihan yang dapat disesuaikan menawarkan cara deklaratif berbasis CSS untuk menata gaya elemen <select> agar sesuai dengan sistem desain merek Anda. Dengan mengaktifkan appearance: base-select, Anda mendapatkan akses ke DOM bayangan internal elemen select, sehingga Anda dapat menata gaya tombol, daftar pemilih opsi, ikon panah, dan indikator tanda centang menggunakan properti CSS standar.

Sebelumnya, untuk mendapatkan elemen select yang sepenuhnya bermerek, kontrol harus dibuat ulang dari awal dengan JavaScript, yang sering kali merusak aksesibilitas, navigasi keyboard, dan integrasi formulir native. Dengan appearance: base-select, Anda mendapatkan tampilan kustom sementara browser menangani pengelolaan fokus, rendering lapisan atas, dan binding aksesibilitas.

Cara Menerapkan

Untuk menerapkan gaya pilihan bermerek:

  1. Memilih ikut serta dalam penyesuaian: Terapkan appearance: base-select ke elemen <select> dan elemen semu ::picker(select) (yang menargetkan menu drop-down opsi).
  2. Menyusun struktur tombol kustom (Opsional): Tentukan elemen <button> langsung di dalam <select> untuk menggantikan pemicu default. Gunakan elemen <selectedcontent> di dalam tombol ini untuk merepresentasikan teks atau konten opsi yang saat ini dipilih.
  3. Menata Gaya Daftar Pemilih: Gunakan elemen pseudo ::picker(select) untuk menerapkan tipografi, warna latar belakang, batas, dan bayangan ke menu dropdown. Browser merender ini di lapisan atas, sehingga konflik z-index tidak akan terjadi lagi.
  4. Ikon Internal Gaya:
    • Gunakan select::picker-icon untuk menata gaya atau mengganti ikon panah.
    • Gunakan option::checkmark untuk menata gaya indikator tanda centang di samping opsi aktif.
  5. Opsi Gaya: Terapkan gaya ke elemen <option> untuk status pengarahan kursor, padding, dan tata letak.

Contoh Kode: Branded Courier Select

Contoh berikut menunjukkan pilihan kustom yang diberi gaya dengan font monospace dan batas putus-putus agar sesuai dengan estetika merek "paket" tertentu.

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

Penerapan Strategis & Praktik Terbaik

  • GUNAKAN appearance: base-select jika sistem desain Anda memerlukan konsistensi visual dengan fidelitas tinggi di semua kontrol formulir yang tidak dapat dicapai dengan penggantian pilihan lintas browser standar.
  • JANGAN gunakan ini jika Anda mengandalkan pengalaman pemilih native sistem operasi (misalnya, pemilih roda scroll standar di perangkat iOS). Memilih ikut serta dalam base-select berarti memilih tidak ikut dalam kontrol UI seluler native dan memilih menu lapisan atas yang dirender web.
  • LAKUKAN verifikasi bahwa kontras warna memenuhi standar WCAG. Pemilih yang dapat disesuaikan memungkinkan Anda menetapkan warna ad-hoc, tetapi Anda bertanggung jawab untuk memastikan teks tetap terbaca di latar belakang kustom.
  • Menguji perilaku tata letak. Menetapkan appearance: base-select akan menghapus perilaku browser default yang mengubah ukuran pilihan berdasarkan lebar opsi terpanjangnya. Anda mungkin perlu menetapkan lebar tetap atau menggunakan batasan flex/grid untuk mencegah pergeseran tata letak.
  • Pastikan <select> Anda memiliki atribut name dan <label> terkait. Hal ini memastikan bahwa meskipun dengan UI kustom, komponen tetap dapat diakses oleh pembaca layar dan berfungsi dengan benar dengan pengiriman formulir standar.
  • Gunakan atribut value standar pada opsi untuk memastikan pengiriman formulir berfungsi sama persis seperti sebelumnya.

Strategi penggantian

Penggantian & dukungan browser untuk <select> yang Dapat Disesuaikan

Untuk browser yang belum mendukung appearance: base-select, elemen <select> akan menurun secara halus menjadi dropdown sistem operasi standar.

  • Konten Non-Teks Diabaikan: Browser lama menghapus tag HTML (seperti <svg> atau <div>) di dalam tag <option> dan hanya merender node teks. Pastikan konten teks <option> dapat dibaca dan bermakna dengan sendirinya.
  • Penanganan Struktur HTML: Parser standar dapat mengabaikan tag <button> dan <selectedcontent> di dalam <select> atau memperlakukannya sebagai tidak valid. Polyfill JavaScript yang berat tidak mutlak diperlukan untuk progressive enhancement jika Anda menganggap teks standar sebagai pengganti yang dapat dibaca.
document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});