Permintaan masukan developer: pilihan yang dapat disesuaikan

Una Kravets

Gaya visual kontrol formulir seperti elemen <select> telah dilaporkan sebagai masalah utama developer selama bertahun-tahun, dan kami telah berupaya menemukan solusinya. Meskipun pekerjaan ini rumit dan membutuhkan waktu yang lama untuk melakukannya dengan benar, kami semakin dekat dengan fitur ini. Versi elemen pilihan yang dapat disesuaikan secara resmi tersedia 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 tanda 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 butuh waktu tiga menit untuk menyelesaikannya!

Catatan: Untuk masukan tahap pertama ini, kami memahami bahwa implementasi aksesibilitas di Chrome Canary belum selesai (meskipun sudah ada implementasi awal yang bisa Anda coba). Tim yang terdiri dari penulis, pengimplementasi browser, dan pakar teknologi pendukung bekerja keras untuk memastikan aksesibilitas yang baik untuk pola penulis yang valid. Kami ingin mendengar masukan Anda tentang penerapan awal ini.

Mari pelajari lebih jauh fitur-fitur API pilihan yang dapat disesuaikan, yang dibuat berdasarkan tag pemilihan HTML yang sudah ada.

Memilih untuk menggunakan <select> baru

Untuk ikut serta dalam perilaku baru ini, gunakan properti appearance CSS, baik di tombol pilih dalam halaman maupun di pemilih pilih. Untuk memilih ikut serta, setel appearance: base-select di elemen <select> dan di ::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. Elemen semu pemilih ini adalah pop-up 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 mengikutsertakan tombol dalam halaman, tetapi Anda tidak dapat mengikutsertakan hanya pop-up pemilih tanpa mengikutsertakan tombol dalam halaman. ::picker(select) hanya dibuat setelah appearance: base-select diterapkan ke <select>.

Sekarang Anda siap untuk menyesuaikan elemen {i>select<i}. Fitur 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 terhadap pilihan yang ada di Chrome di macOS:

Gaya agen pengguna default untuk pilihan yang dapat disesuaikan di sebelah kanan. Hal ini dapat berubah, dan kami ingin mendengar masukan Anda.

Demo pilihan dasar versus pilihan yang dapat disesuaikan.

Catatan: Atribut multiple dan size pada pilihan (<select multiple> dan <select size=n>) belum didukung di appearance: base-select.

Memecah bagian

Diagram yang menunjukkan bagian dari select.

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 (hal 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 menu drop-down opsi (::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 menginginkan tanda centang indikator di ::sebelum elemen semu opsi, gunakan CSS berikut.

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

Catatan: Kami ingin mendengar masukan Anda tentang cara mengakses dan menata gaya bagian tanda centang dari pilihan.

Meskipun mungkin ada jumlah elemen yang tidak terbatas di dalam pilihan Anda, 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 lainnya secara langsung di dalam pilihan akan diangkat ke dalam ::picker(select), atau Anda dapat menggunakan 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. Responsible AI dibangun dengan dua teknologi yang mendasari. Ini berarti bahwa daftar opsi drop-down dalam pilihan berfungsi sebagai pop-up yang ditambatkan ke tombol pemicu yang membuka pilihan tersebut.

Anda dapat menggunakan pemosisian anchor untuk menata gaya pop-up ::picker(select) ini (termasuk membuatnya ditambatkan 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 sudah ada.

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

Semua konten teks dalam option dirender dalam versi penggantian elemen select.

Gaya visual dasar

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

Mengubah gaya berbagai bagian pilihan, dengan tombol default.

Untuk menyesuaikan indikator panah, tambahkan tombol dan panah Anda sendiri di dalam tombol 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 beberapa opsi

Manfaatkan 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>

Pemilih negara dengan bendera.

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>

Screenshot pemilih mata uang.

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 di .text di dalam <selectedoption>' untuk menyembunyikan konten teks dan hanya menampilkan ikon:

selectedoption .text {
  display: none;
}

Pilihan bergaya Gmail dengan ikon yang mewakili opsi yang dipilih.

Opsi interaktif

Dengan kontrol penuh atas gaya visual ::picker(select), kembangkan demo sebelumnya agar bersifat 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 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);
}

Pilihan gaya Gmail interaktif dengan konten yang ditampilkan secara bertahap saat diarahkan atau difokuskan.

Batasan dan catatan aksesibilitas

Bersama dengan kekuatan besar datanglah tanggung jawab yang besar. Agar tetap dapat diakses, ada beberapa batasan untuk fitur ini.

• Selain elemen <option>, tidak 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 masih dalam tahap eksperimen karena kami sedang mengupayakan solusi yang dapat diakses.

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

Kesimpulan

Kami tidak sabar untuk melihat progres fitur ini melalui grup kerja dan badan standar, serta membagikan progres kami selagi kami aktif membangun prototipe dan mengevaluasi bentuk fitur ini. Jika Anda menemukan sesuatu yang tidak berfungsi seperti yang Anda harapkan, beri tahu kami.

Meskipun fitur ini masih dalam pengembangan, kami ingin mendengar masukan Anda melalui formulir masukan singkat ini.

Terima kasih telah menjadi bagian dalam memastikan kami melakukannya dengan benar dan mempermudah pembuatan kontrol formulir yang mudah diakses dan dapat disesuaikan di web.