Elemen menu pilihan sudah tidak ada…seleksi panjang umur! – Beragampengetahuan

Saya sedang melihat artikel lama yang ditulis Patrick Brosset untuk kita <selectmenu>usulan baru saat itu adalah mendapatkan sepupu yang lebih bergaya <select>. Dari sana, saya mengklik tautannya <selectmenu> Penjelas mendapatkan…ini:

Ya, tautan rusak adalah suatu hal dan terjadi setiap saat. Mungkin situs tersebut memerlukan beberapa desain URL? Tapi tidak, sama sekali tidak seperti itu. Saya melakukan pencarian dan menemukan postingan Jared White yang berbunyi <selectmenu> Tidak lagi, berikut postingan Una di Blog Pengembang Chrome yang meminta masukan tentang “pilihan yang dapat disesuaikan”. Tidak mengherankan jika Adam Argyle mendedikasikan demo yang bagus untuk itu.

Saya hanya membagikan tautannya untuk saat ini, namun berencana untuk meluangkan waktu dengannya dan membuat catatan di halaman baru Open UI yang dapat disesuaikan <select>. Saya menyukai tampilan pertama boilerplate di demo Adam:

select {
  &, &::picker(select) {
    appearance: base-select;
  }
  
  &::picker(select) {
    transition: 
      display allow-discrete 1s, 
      opacity 1s, 
      overlay 1s allow-discrete
    ;
  }
  
  &:not(:open)::picker(select) {
    opacity: 0;
  }
  
  &:open::picker(select) {
    opacity: 1;
    
    @starting-style {
      opacity: 0;
    }
  }
}

jadi begitu ::picker(select) Itu semua didorong olehnya. Jika saya mengintip postingan Una, saya akan melihat bahwa ada lebih banyak cara untuk memilih yang berbeda <select> Bagian-bagiannya, antara lain:

• <selectedoption> (saat ini dipilih)
• <option> (HTML antar tag sekarang diterima!)
  • option::before
  • option:checked (Ada sedikit kebingungan di sini dengan opsi yang dipilih)
• <button> (Benda-benda yang ditandai dengan panah kecil berbentuk V)

Jadi, mungkin Chrome lebih suka memperluas yang asli <select> Memiliki fungsionalitas CSS tambahan untuk memilih bagian yang sudah ada daripada melanjutkan dengan elemen yang sepenuhnya baru. Ini keren karena salah satu demo Una menunjukkan bagaimana kita masih bisa mendapatkan nilai default <select> Perilaku ini terjadi meskipun browser tidak mendukung pemilih baru.

Elemen menu pilihan sudah tidak ada…seleksi panjang umur! Awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.