Elemen <select> kini dapat disesuaikan dengan CSS

Adam Argyle

Dipublikasikan: 24 Maret 2025

Mulai Chrome 135, developer dan desainer web akhirnya dapat bersatu pada elemen <select> yang dapat diakses, standar, dan dapat diberi gaya CSS di web. Proses ini telah berlangsung selama bertahun-tahun, dengan banyak jam kerja rekayasa dan spesifikasi kolaboratif, dan hasilnya adalah komponen yang sangat kaya dan canggih yang tidak akan rusak di browser lama.

Berikut adalah video tentang pilihan yang disesuaikan menggunakan fitur baru ini:

Menampilkan demo oleh Una, Brecht, dan Adam.

Jika Anda telah mengikutinya dengan cermat, Anda akan melihat beberapa nama dan fitur spesifikasi telah berubah sejak permintaan Una untuk mendapatkan masukan komunitas. Untungnya, jika Anda menggunakan postingan tersebut dan tertarik dengan apa yang berubah, Una juga siap membantu Anda.

Ada juga dokumentasi baru yang menarik di MDN untuk select yang dapat disesuaikan, yang berisi banyak detail.

Meet appearance: base-select

Properti CSS baru appearance: base-select yang menempatkan elemen <select> ke dalam status baru yang dapat dikonfigurasi dan ditata gayanya yang biasanya disebut sebagai gaya "dasar":

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

Menggunakan base-select akan membuka sejumlah fitur dan perilaku baru:

  • Mengubah parser HTML browser untuk konten di dalam <select>.
  • Mengubah internal yang dirender dari <select>.
  • Mengekspos bagian dan status internal baru untuk <select>.
  • Tampilan minimal baru, yang dioptimalkan untuk penyesuaian.
  • Opsi yang ditampilkan berada di lapisan atas, seperti popover.
  • Opsi yang ditampilkan diposisikan dengan anchor().

Menggunakan base-select akan kehilangan sejumlah fitur dan perilaku:

  • <select> tidak dirender di luar panel browser.
  • Fitur ini tidak memicu komponen sistem operasi seluler bawaan.
  • <select> berhenti mengambil lebar <option> terpanjang.

<select> kini dapat menyertakan konten HTML yang kaya

Sebelum Anda dapat menyesuaikan <select>, jika Anda memasukkan hal-hal seperti gambar atau SVG ke dalam elemen <option>, browser akan mengabaikannya.

Pertimbangkan HTML berikut, browser akan membacanya seperti yang Anda tulis:

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

Namun, DOM yang digunakan tidak akan menyertakan <svg>:

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

Berikut ini (dari kiri ke kanan) Chrome, Safari, dan Firefox yang merender HTML sebelumnya. Jika browser mendukung appearance: base-select, SVG akan muncul dalam opsi, jika tidak, SVG tidak akan muncul.

Chrome, Safari, dan Firefox ditampilkan merender pilihan dengan SVG di dalamnya. Chrome menampilkan gambar, Safari dan Firefox merender seolah-olah tidak ada gambar.
Coba di Codepen ini.

Ada risiko kerusakan situs yang ada dengan pilihan yang dapat disesuaikan, karena perubahan parser. Chrome memiliki fitur di balik eksperimen Finch jika ada kebutuhan darurat untuk menonaktifkannya. Jika semuanya berjalan lancar, eksperimen akan berakhir dan kode akan dikirim secara permanen ke sumber.

Dapat disesuaikan sepenuhnya

Setiap bagian base-select dapat diganti, disesuaikan, dan dianimasikan. Berikut adalah demo yang menggunakan setiap fitur baru untuk membuat pengalaman pilihan yang mudah dikenali dan bermakna.

Empat presentasi berbeda dari elemen yang dipilih ditampilkan. Yang pertama memiliki titik indikator status berwarna hijau, dengan label aktif. Halaman berikutnya menampilkan avatar di samping opsi. Yang ketiga adalah pemilih ruang warna dengan label kustom yang disertakan dalam pilihan. Yang terakhir memungkinkan Anda memilih status draf atau yang dipublikasikan.
Coba di Codepen ini.

Temukan banyak contoh lainnya di bagian referensi di akhir postingan ini.

Antarmuka JavaScript yang tidak berubah

Tidak ada risiko terhadap interaksi JavaScript yang ada dengan elemen <select>.

Namun, jika Anda mulai menambahkan HTML yang kaya ke elemen <option>, Anda harus menguji nilai yang dipilih, karena browser masih mengurai dan mengabaikan gambar dan SVG. Namun, logika untuk menentukan string konten yang dipilih telah berubah, dan Anda mungkin perlu melakukan penyesuaian, bergantung pada opsi yang Anda miliki.

Jika menggunakan atribut value di <option>, Anda tidak perlu khawatir.

Resource

Chrome adalah yang pertama mengimplementasikan base-select, tetapi setiap browser berpartisipasi dalam spesifikasi, dan ada lebih banyak elemen "dasar" yang belum selesai. Ini baru permulaan.

Nantikan terus karena kami akan terus menambahkan panduan, contoh, dan referensi tentang cara menyesuaikan elemen tertentu. Sementara itu, lihat link berikut untuk mengetahui informasi selengkapnya.

Terima kasih khusus kepada semua orang yang terlibat dalam mewujudkan hal ini.