Menata gaya kontrol formulir seperti elemen <select> telah dilaporkan sebagai kesulitan utama developer selama bertahun-tahun, dan kami telah berupaya mencari solusinya. Meskipun pekerjaan ini rumit dan membutuhkan waktu lama untuk menyelesaikannya, kami sudah sangat dekat untuk meluncurkan fitur ini. Versi elemen select yang dapat disesuaikan secara resmi berada di Tahap 2 di WHATWG, dengan minat lintas browser yang kuat dan prototipe yang dapat Anda uji dari Chrome Canary 130.
Cobalah dan berikan masukan Anda kepada kami
Pastikan penginstalan Chrome Canary Anda telah diupdate ke versi 130, dan Anda telah mengaktifkan tanda fitur platform web eksperimental. Anda dapat mengaktifkan tanda ini dengan membuka chrome://flags di kolom URL dan mengaktifkan #experimental-web-platform-features. Kemudian, Anda akan dapat melihat demo Codepen di postingan ini. Atau, Anda dapat melihat koleksi Codepen ini untuk melihat semuanya di satu tempat.
Gunakan formulir ini untuk memberikan masukan tentang fitur tersebut. Hanya perlu waktu tiga menit untuk menyelesaikannya.
Mari kita pelajari fitur API pilihan yang dapat disesuaikan, yang dibuat berdasarkan tag pilihan HTML yang ada.
Memilih ikut serta dalam <select> baru
Untuk mengaktifkan perilaku baru, gunakan properti appearance CSS pada tombol pilihan dalam halaman dan juga pada pemilih pilihan. Untuk mengaktifkan, tetapkan appearance: base-select di elemen <select> dan di ::picker(select).
::picker(select) adalah elemen pseudo baru yang disediakan agen pengguna yang hanya berlaku untuk elemen <select> yang telah diikutsertakan dalam perilaku baru menggunakan appearance: base-select. Elemen pseudo pemilih ini adalah popover yang dipicu oleh tombol pilih dasar. Anda dapat mengaktifkan keduanya seperti yang ditunjukkan dalam kode berikut:
select,
::picker(select) {
appearance: base-select;
}
Anda dapat memilih untuk hanya mengaktifkan tombol dalam halaman, tetapi Anda tidak dapat mengaktifkan popover pemilih saja tanpa mengaktifkan tombol dalam halaman. ::picker(select) hanya dibuat setelah appearance: base-select diterapkan ke <select>.
Sekarang Anda siap menyesuaikan elemen pilihan. Elemen select baru yang dapat disesuaikan dilengkapi dengan beberapa gaya default yang terlihat sama di berbagai browser dan sistem operasi. Berikut tampilan pilihan yang disesuaikan secara default dibandingkan dengan pilihan yang ada di Chrome di macOS:
Menguraikan bagian-bagian
Setelah berada dalam mode pemilihan baru yang dapat disesuaikan, elemen baru yang kini dapat Anda akses meliputi:
- selectedoption: mencerminkan HTML dalam dari opsi yang saat ini dipilih.
option::before: berisi tanda centang untuk menunjukkan opsi yang saat ini dipilih sebagai affordance aksesibilitas default (ini dapat berubah).
::picker(select): popover yang berisi semua konten di luar button di dalam pilihan yang dapat disesuaikan.
Anda dapat menata gaya bagian mana pun dari pilihan. Misalnya, Anda dapat menambahkan konten non-interaktif arbitrer dalam elemen <option>, menata gaya tombol dalam halaman yang membuka drop-down pilihan, dan menata gaya daftar drop-down opsi (::picker(select)).
Anda juga dapat menata gaya button, menggunakan indikator panah Anda sendiri, dan menambahkan konten arbitrer di dalam dan di sekitar elemen mana pun. Selain menambahkan konten, Anda dapat menyembunyikan elemen baru dan gaya default ini. Misalnya, jika Anda tidak menginginkan tanda centang indikator di elemen pseudo ::before pada opsi, gunakan CSS berikut.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Meskipun dapat ada jumlah elemen yang tidak terbatas di dalam select, browser akan mengelompokkan apa pun di luar elemen <button> ke dalam elemen semu ::picker(select), yang berperilaku sebagai popover yang ditambatkan ke tombol. <button> ini mengaktifkan/menonaktifkan ::picker(select). Opsi dan elemen lain yang berada langsung di dalam pilihan akan diangkat ke dalam ::picker(select), atau Anda dapat menggunakan wrapper Anda sendiri untuk tujuan penataan gaya. Wrapper ini juga akan ditempatkan di dalam elemen semu ::picker(select).
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
<select> baru yang dapat disesuaikan menggunakan fungsi dari popover dan pemosisian anchor. Fitur ini dibuat dengan dua teknologi dasar tersebut. Artinya, daftar opsi drop-down dalam elemen select bertindak sebagai popover yang ditambatkan ke tombol pemicu yang membuka elemen select.
Anda dapat menggunakan pemosisian anchor untuk menata gaya popover ::picker(select) ini (termasuk membuatnya di-anchor ke elemen lain). Model konten ini juga berarti bahwa gaya animasi lapisan atas berfungsi dengan daftar opsi untuk menganimasikan efek masuk dan keluar.
Meningkatkan elemen <select> yang ada
Sebelumnya, tim Chrome sedang mengerjakan ide elemen <selectlist>. Yang dijelaskan dalam postingan ini adalah fitur yang didesain ulang untuk menggunakan kembali elemen <select> yang ada.
Salah satu manfaat utama penggunaan kembali elemen <select> yang ada adalah kemampuan untuk meningkatkan elemen HTML dasar secara progresif. Dibandingkan dengan elemen baru, penggunaan kembali <select> akan tetap merender konten yang bermakna di halaman Anda. Contoh berikut menunjukkan pilihan yang disesuaikan versus apa yang akan dilihat pengguna di browser yang tidak didukung:
option dirender dalam versi penggantian elemen select.Penataan gaya dasar
Perubahan dapat berupa gaya visual elemen pilihan. Misalnya, untuk memperbarui gaya tombol, gaya kursor dan fokus, atau latar belakang opsi pilihan. Setelah mengaktifkan appearance: base-select, terapkan CSS yang Anda inginkan ke bagian pilihan Anda.
Untuk menyesuaikan indikator panah, tambahkan tombol dan panah Anda sendiri di dalam pilihan.
<select>
<button>
<selectedoption></selectedoption>
<span>
// Arrow here
</span>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Kemudian, beri gaya pada panah:
/* style the arrow */
button span {
/* arrow styles */
transition: rotate 0.2s;
}
/* adjust arrow styles when the picker is open */
select:open button span {
rotate: -180deg;
}
Konten kompleks dalam opsi
Lakukan lebih banyak hal dengan kemampuan untuk menambahkan dan menata gaya konten selain string dalam elemen <option> di dalam <select>. Contoh dasarnya adalah menambahkan gambar bendera di samping nama negara di menu drop-down. Untuk melakukannya, tambahkan elemen gambar di samping teks opsi.
<option value="france">
<img src="img/flag_of_france.svg" alt="" />
<span>France</span>
</option>
Contoh yang lebih kompleks dapat mencakup foto profil, nama, dan informasi alternatif untuk membantu Anda membuat keputusan tentang item yang akan dipilih di menu drop-down.
<option value="eur">
<img src="euro-flag.png" alt="" />
<div class="currency">
<div class="currency-short">EUR</div>
<div class="currency-long">Euro</div>
</div>
<div class="symbol" aria-hidden="true">€</div>
</option>
Menata gaya opsi yang dipilih
Anda mungkin ingin opsi yang dipilih ditampilkan secara berbeda dalam status yang dipilih dibandingkan dengan di menu drop-down. Contohnya adalah UI Gmail, yang menghapus label setelah opsi dipilih untuk menghemat ruang. Lakukan ini dengan mengaitkan ke elemen <selectedoption> untuk penataan gaya. <option> berisi semua markup berikut:
<option value="reply-all">
<img class="material-symbol" src="material-symbol-reply.png">
<span class="text">Reply all</span>
</option>
Sekarang, terapkan display: none pada .text di dalam <selectedoption>' untuk menyembunyikan konten teks dan hanya menampilkan ikon:
selectedoption .text {
display: none;
}
Opsi interaktif
Dengan kontrol penuh atas gaya ::picker(select), kembangkan demo sebelumnya untuk membuatnya interaktif saat kursor diarahkan dan difokuskan. Dalam demo ini, fungsi calc-size() baru digunakan untuk menganimasikan lebar pemilih dari menampilkan ikon hingga menampilkan lebar penuh opsi saat kursor diarahkan atau jika pilihan memiliki opsi dengan focus-visible.
/* base styles when picker is open but not interacted with */
::picker(select) {
width: var(--icon-width);
transition: width 0.5s;
}
/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
/* auto width! */
width: calc-size(auto, size + 0.5rem);
}
Batasan dan catatan aksesibilitas
Kekuatan yang besar memerlukan tanggung jawab yang besar pula. Agar tetap dapat diakses, ada beberapa batasan untuk fitur ini.
- Selain elemen
<option>, belum ada elemen interaktif (dapat difokuskan) yang diizinkan di dalam<select>, seperti tombol atau elemen lainnya. Untuk saat ini, model konten yang diusulkan hanya mengizinkan elemen<div>,<span>,<option>,<optgroup>,<img>,<svg>, dan<hr>. - Tombol terpisah saat ini sedang dalam fase eksperimen selagi kami mencari solusi yang mudah diakses.
Pada masa mendatang, model konten diharapkan akan diperluas agar lebih fleksibel, seiring dengan pengembangan cerita aksesibilitas untuk pengalaman ini.
Kesimpulan
Kami sangat antusias melihat perkembangan fitur ini melalui kelompok kerja dan badan standar, serta membagikan progres kami saat kami secara aktif membangun prototipe dan mengevaluasi bentuk fitur ini. Jika Anda menemukan sesuatu yang tidak berfungsi seperti yang diharapkan, beri tahu kami.
Meskipun fitur ini masih dalam pengembangan, kami ingin mendengar masukan Anda melalui formulir masukan singkat ini.
Terima kasih telah menjadi bagian dari upaya kami untuk memastikan hal ini dilakukan dengan benar dan mempermudah pembuatan kontrol formulir yang mudah diakses dan dapat disesuaikan di web.