0Pricing
HTML Academy · Pelajaran

Elemen selectlist

Sesuaikan kontrol tarik-turun dengan elemen selectlist yang diusulkan.

Elemen selectlist adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Keterbatasan yang Telah Lama Ada

Elemen <select> adalah salah satu dari sedikit kontrol formulir yang tampilannya tidak dapat diberi gaya. Setiap aturan CSS yang diterapkan padanya (batas khusus, font, gaya opsi) diabaikan oleh peramban, sehingga ribuan pustaka “menu tarik-turun khusus” menggandakan perilaku bawaan hanya untuk mendapatkan opsi yang dapat diberi gaya.

Apa Itu selectlist

<selectlist> (yang juga ditemukan sebagai <selectmenu>) adalah elemen HTML bawaan yang dirancang sebagai pengganti <select> yang dapat diberi gaya. Elemen ini menerima model konseptual yang sama—pemicu berupa tombol dan daftar opsi—tetapi setiap bagiannya terbuka untuk penyesuaian CSS.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Bagian yang Dapat Diberi Gaya

selectlist mengekspos tombol (pemicu saat tertutup), kotak daftar (menu tarik-turun saat terbuka), dan opsi. Pseudoelement CSS (::part(button), ::part(listbox)) memungkinkan Anda memberi gaya pada masing-masing bagian tanpa memengaruhi perilaku bawaan.

Menyesuaikan Opsi

Opsi di dalam selectlist dapat berisi konten apa pun—ikon, deskripsi, tata letak khusus—bukan hanya teks. Peramban tetap menangani logika pemilihan, navigasi papan ketik, dan pengelolaan fokus, sementara Anda bebas mengatur tampilannya.

Perilaku Bawaan Tetap Dipertahankan

selectlist mempertahankan semua hal yang dilakukan <select> dengan baik: navigasi papan ketik (tombol panah, pengetikan awal), pengumuman pembaca layar, keikutsertaan dalam formulir, dan pengelolaan fokus. Anda mewarisi perilaku yang aksesibel dan dapat menata antarmukanya di atas perilaku tersebut.

Tombol Kustom

Sediakan slot untuk pemicu: <button slot="button">Choose fruit <svg>...</svg></button>. Anda bebas merancang tombolnya—ganti segitiga bawaan dengan ikon khusus, tambahkan label, dan ubah warna. Peramban tetap menangani pembukaan dan penutupan.

Keikutsertaan dalam Formulir

selectlist ikut serta dalam pengiriman formulir seperti select: elemen ini memiliki atribut name dan value, lalu dikirim bersama formulir. Penanganan di sisi server identik. Pengganti langsung pada tingkat markah untuk sebagian besar kasus penggunaan select.

Dukungan Peramban

selectlist adalah fitur tahap awal. Pada 2026, fitur ini tersedia di peramban berbasis Chromium melalui tanda fitur atau dalam bentuk terbatas. Firefox dan Safari belum mendukungnya. Penggunaan di produksi memerlukan pencadangan ke <select> biasa untuk peramban yang tidak mendukungnya.

Kesulitan Membuat Polyfill

Menyediakan polyfill untuk menu tarik-turun khusus yang sepenuhnya aksesibel dan sesuai dengan perilaku bawaan itu sulit—pengurungan fokus, navigasi papan ketik, integrasi pembaca layar, dan keikutsertaan dalam formulir. Pustaka seperti Downshift, Combobox, dan react-aria menangani pekerjaan ini dengan ribuan baris kode. selectlist menggantikan semua itu dengan satu elemen.

Kapan Sebaiknya Mengadopsinya

Untuk aplikasi internal atau penerapan yang hanya menargetkan Chromium, selectlist menghemat banyak kode saat ini. Untuk situs publik dengan audiens luas, tunggulah dukungan Firefox dan Safari, atau gunakan pustaka pembungkus yang memakai selectlist jika didukung dan menggunakan menu tarik-turun React/Vue khusus sebagai cadangan di tempat lain.

Peta Jalan Penggantian

Setelah selectlist tersedia di semua browser, perkirakan banyak pustaka menu tarik-turun khusus akan ditandai usang atau berubah menjadi pembungkus tipis di sekitar elemen bawaan. Pantau proses standardisasi; API ini telah mengalami beberapa revisi dan mungkin terus berkembang sebelum menjadi standar final.

Implikasi terhadap Desain

Desainer kini dapat menentukan menu tarik-turun yang sangat presisi hingga ke tingkat piksel tanpa catatan seperti "Inilah desainnya, tetapi menu tarik-turunnya akan terlihat berbeda di browser". selectlist menghilangkan salah satu ketidakkonsistenan visual yang telah lama terjadi antara maket desain dan HTML yang dipublikasikan.

Pemeriksaan Pengetahuan

Mengapa elemen selectlist penting — keterbatasan apa pada