`<select>` kini bisa dikustomisasi dengan CSS

• Mulai Chrome 135, dukungan fitur baru hadir untuk elemen <select> yang memungkinkan kustomisasi CSS sambil tetap mempertahankan standar aksesibilitas
• Setelah bertahun-tahun penyesuaian spesifikasi dan pengembangan, fitur ini disediakan sebagai komponen tangguh yang tidak rusak bahkan di browser lama
• Konten HTML juga dapat disertakan, dan dengan tambahan appearance: base-select, berbagai kustomisasi seperti animasi dan styling menjadi dimungkinkan

Pengenalan appearance: base-select

• Properti CSS baru appearance: base-select mengubah elemen <select> ke status baru yang dapat dikustomisasi

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

• Fitur baru yang muncul saat menggunakan base-select

  • Perubahan perilaku parser HTML browser terhadap konten di dalam <select>
  • Perubahan cara rendering dan struktur internal
  • Menyediakan part dan state internal baru
  • Menyediakan desain default minimal (dioptimalkan untuk kustomisasi)
  • Opsi yang ditampilkan muncul di lapisan teratas seperti popover
  • Posisi opsi dapat dikendalikan dengan anchor()

• Fitur yang hilang saat menggunakan base-select

  • Tidak bisa merender <select> di luar jendela browser
  • Tidak memanggil UI pemilihan bawaan OS mobile
  • Tidak mencerminkan lebar dari <option> terpanjang

Dapat menyertakan konten HTML di dalam <select>

• Sebelumnya, jika menyisipkan gambar atau SVG di dalam <option>, browser akan mengabaikannya
• Jika appearance: base-select diterapkan, HTML akan dirender apa adanya
• Di Chrome, opsi yang menyertakan SVG dapat terlihat, tetapi Safari, Firefox, dan lainnya belum mendukung
• Demo CodePen: tautan praktik
• Fitur ini diperkenalkan sebagai eksperimen Finch dan dapat dihentikan bila diperlukan

Dapat dikustomisasi sepenuhnya

• Semua komponen base-select dapat diganti, dianimasikan, dan diberi style
• Dengan berbagai desain, UI pemilihan yang bermakna dapat dibuat
• Contohnya mencakup indikator status, opsi dengan avatar, pemilih warna, dan pemilihan status posting
• Demo CodePen: tautan praktik

Tidak ada perubahan pada antarmuka JavaScript

• Perilaku JavaScript untuk <select> yang ada tetap dipertahankan sama
• Namun, jika HTML dimasukkan ke dalam <option>, cara parsing nilai terpilih telah berubah sehingga perlu diuji
• Jika menggunakan properti value, tidak perlu modifikasi tambahan

Materi tambahan

Standar web

• Spesifikasi Open UI Select
• Pull Request spesifikasi HTML
• Chrome Intent to Ship

Materi terkait Chrome

• Tulisan permintaan dan penjelasan di blog Chrome
• Hasil umpan balik komunitas
• Menggunakan <hr> di dalam <select>
• Tulisan penjelasan Una / tautan ringkasan perubahan
• Kumpulan CodePen Una

Materi komunitas

• Kumpulan CodePen Brecht De Ruyte
• Perbandingan native vs custom select oleh CSS Tricks
• Implementasi <select> dari Open Props UI
• Contoh custom select dengan animasi

Demo yang memanfaatkan <select> yang telah dikustomisasi

• Demo Una
• Demo Brecht
• Demo Adam

[GN⁺]

Komentar Hacker News

• Saya mungkin terlalu bersemangat soal fitur ini, dan itu mungkin menunjukkan diri saya sebagai pengembang web awal 2000-an. Ini sangat berguna karena elemen select menyediakan kemampuan yang tidak bisa direplikasi dengan HTML

  • Sekarang yang perlu ditambahkan berikutnya adalah autocomplete dan pemilih tag

• Sampai fitur ini didukung secara luas, ini harus digunakan sebagai progressive enhancement. Saat ini menurut caniuse.com, dukungan globalnya 46%

  • Harus berhati-hati agar tidak memberikan pengalaman buruk kepada pengguna browser yang belum mendukung
  • Penting untuk tidak menaruh informasi atau fungsi penting pada styling baru ini

• Saya sangat senang melihat fitur ini diimplementasikan. Ini akan menjadi peningkatan yang jauh lebih besar dibanding pengganti kotak select kustom

• Saya khawatir ini tidak memicu komponen bawaan sistem operasi mobile. Komponen bawaan itu andal, aksesibel, dan responsif

  • Menyenangkan ketika UI Android terbuka dengan andal. Ini berlaku bukan hanya untuk elemen select, tetapi juga input tanggal/waktu

• Untuk beberapa kontrol, lebih baik tidak diberi styling. Pada scrollbar, misalnya, sering kali terlalu tipis atau kontras warnanya buruk sehingga sulit digunakan

  • Elemen select bawaan memang bukan kontrol yang paling cantik, tetapi fungsinya berjalan

• Ini terasa seperti sesuatu yang sudah ditunggu para pengembang web selama puluhan tahun. Ada potensi untuk menggantikan banyak library JS

  • Saya tidak memasang Chrome, tetapi saya penasaran bagaimana field multi-select ditangani dalam video contoh

• Elemen select kini bisa dikustomisasi dengan CSS di browser Chromium

  • Standar web makin lama makin kompleks

• Tautan ke issue Firefox disediakan

• Kalau terus begini, sebentar lagi kita akan punya kesetaraan fitur dengan VB6

• Lebih baik daripada library JS yang rusak. Tetapi perhatian utama saya adalah bagaimana layout-nya saat opsinya sangat banyak

  • Saya takut karena ini tidak memicu komponen bawaan sistem operasi mobile. Saya penasaran bagaimana layout-nya
  • Opsi yang ditampilkan diposisikan dengan anchor()
  • Ini masih eksperimental, tetapi mungkin justru bagian itu yang paling bagus. Jika benar-benar bekerja di CSS, itu akan luar biasa

[carnoxen]

Kalau begitu, apakah <selectlist> jadi tidak diperlukan lagi?

[deminoth]

Ngomong-ngomong, judul <select> ternyata tidak ditampilkan di Slackbot, haha

[xguru]

Aduh huhu ini akan saya perbaiki nanti.