Permintaan masukan developer: pilihan yang dapat disesuaikan

Una Kravets

Gaya visual kontrol formulir seperti elemen <select> telah dilaporkan sebagai poin masalah utama developer selama bertahun-tahun, dan kami telah berupaya menemukan solusinya. Meskipun pekerjaan ini rumit dan memerlukan waktu lama untuk diselesaikan, kami hampir siap meluncurkan fitur ini. Versi elemen pilih yang dapat disesuaikan secara resmi berada di Tahap 2 di WHATWG, dengan minat lintas browser yang kuat dan prototipe untuk Anda uji dari Chrome Canary 130.

Cobalah dan beri kami masukan

Pastikan penginstalan Chrome Canary Anda telah diupdate ke versi 130, dan Anda telah mengaktifkan tanda fitur platform web eksperimental. Anda dapat mengaktifkan flag ini dengan membuka chrome://flags di kolom URL dan mengaktifkan #experimental-web-platform-features. Kemudian, Anda akan dapat melihat demo Codepen dalam 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 select yang dapat disesuaikan, yang dibuat berdasarkan tag select HTML yang ada.

Memilih untuk menggunakan <select> baru

Untuk ikut serta dalam perilaku baru, gunakan properti appearance CSS pada tombol pilih dalam halaman dan juga pada pemilih pilih. Untuk memilih ikut serta, tetapkan appearance: base-select pada elemen <select> dan pada ::picker(select).

::picker(select) adalah elemen pseudo baru yang disediakan oleh agen pengguna yang hanya berlaku untuk elemen <select> yang telah memilih perilaku baru menggunakan appearance: base-select. Pseudo-elemen pemilih ini adalah popover yang dipicu oleh tombol pilih dasar. Anda dapat memilih untuk ikut serta dalam 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 untuk menyesuaikan elemen yang dipilih. Pilihan baru yang dapat disesuaikan dilengkapi dengan beberapa gaya default yang terlihat sama di seluruh browser dan sistem operasi. Berikut tampilan pilihan yang disesuaikan secara default dibandingkan dengan pilihan yang ada di Chrome di macOS:

Memecah bagian

Setelah Anda berada dalam mode pilih baru yang dapat disesuaikan, elemen baru yang kini dapat Anda akses mencakup: - selectedoption: mencerminkan HTML bagian dalam opsi yang saat ini dipilih. - option::before: berisi tanda centang untuk menunjukkan opsi yang saat ini dipilih sebagai kemampuan aksesibilitas default (ini dapat berubah sewaktu-waktu). - ::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 pilih, dan menata gaya daftar opsi drop-down (::picker(select)).

Anda juga dapat menata gaya button, indikator panah bawa sendiri, dan menambahkan konten arbitrer dalam dan di sekitar elemen mana pun. Selain menambahkan konten, Anda dapat menyembunyikan elemen baru dan gaya default ini. Misalnya, jika Anda tidak ingin 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 elemen di dalam pilihan Anda dapat berjumlah tidak terbatas, browser akan mengelompokkan apa pun di luar elemen <button> ke dalam elemen pseudo ::picker(select), yang berperilaku sebagai popover yang disematkan ke tombol. <button> ini mengalihkan ::picker(select). Opsi dan elemen lain yang berada langsung di dalam pilihan akan diangkat ke ::picker(select), atau Anda dapat membawa wrapper Anda sendiri untuk tujuan gaya. Wrapper ini juga akan ditempatkan di dalam elemen pseudo ::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 pemosisi anchor. Aplikasi ini dibuat dengan dua teknologi dasar ini. Ini berarti bahwa daftar opsi drop-down dalam pilihan berfungsi sebagai popover yang ditautkan ke tombol pemicu yang membuka pilihan.

Anda dapat menggunakan pemosisian anchor untuk menata gaya popover ::picker(select) ini (termasuk membuatnya terikat 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 tersebut didesain ulang untuk menggunakan kembali elemen <select> yang ada.

Salah satu manfaat utama menggunakan kembali elemen <select> yang ada adalah kemampuan untuk meningkatkan elemen HTML dasar secara bertahap. Dibandingkan dengan elemen baru, menggunakan kembali <select> akan tetap merender konten yang bermakna di halaman Anda. Contoh berikut menunjukkan pilihan yang disesuaikan versus yang akan dilihat pengguna di browser yang tidak didukung:

Gaya visual dasar

Perubahan mungkin semudah gaya visual elemen yang dipilih. Misalnya, untuk memperbarui gaya tombol, gaya pengarahan kursor dan fokus, atau latar belakang opsi yang dipilih. Setelah memilih ikut serta dengan appearance: base-select, terapkan CSS yang Anda inginkan ke bagian yang Anda pilih.

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, gayai 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

Lanjutkan dengan kemampuan untuk menambahkan dan menata gaya konten di luar 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 mana 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 daripada di drop-down. Contohnya adalah UI Gmail, yang untuk menghemat ruang, label akan dihapus setelah opsi dipilih. Lakukan ini dengan menghubungkan ke elemen <selectedoption> untuk gaya visual. <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 visual ::picker(select), buat demo sebelumnya agar interaktif saat diarahkan kursor dan difokuskan. Dalam demo ini, fungsi calc-size() baru digunakan untuk menganimasikan lebar pemilih dari menampilkan ikon hingga menampilkan lebar penuh opsi saat diarahkan atau jika pilihan memiliki opsi dengan fokus-terlihat.

/* 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 besar memiliki tanggung jawab besar. Agar tetap dapat diakses, ada beberapa batasan untuk fitur ini.

• Selain elemen <option>, belum ada elemen interaktif (yang 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 saat kami mencari solusi yang mudah diakses.

Di masa mendatang, model konten diharapkan akan diperluas agar lebih fleksibel, seiring dengan pengembangan cerita aksesibilitas untuk pengalaman ini.

Kesimpulan

Kami sangat antusias melihat progres fitur ini melalui grup kerja dan badan standar, serta membagikan progres kami saat kami secara aktif membuat 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 kami melakukannya dengan benar dan mempermudah pembuatan kontrol formulir yang dapat diakses dan disesuaikan di web.