Bolehkah CSS Menggayakan Elemen Pilih Berdasarkan Pilihan Terpilihnya?

Gayakan Yang Dipilih: Bolehkah CSS Menggayakan Pilihan Berdasarkan Pilihan Yang Dipilih?

Adakah mungkin untuk menyesuaikan penampilan elemen pilihan berdasarkan pilihan yang dipilih pada masa ini? Walaupun terdapat penyelesaian JavaScript, persoalan ini sering timbul.

Mencabar Yang Mustahil

Menggayakan elemen itu sendiri, seperti yang anda cuba, mengubah suai penampilannya apabila ia hadir dalam senarai pilihan, tetapi tidak apabila dipilih. CSS sahaja tidak boleh menyasarkan elemen yang dipilih secara langsung disebabkan oleh pengehadan teknikal semasa.

Pemilih Subjek untuk Menyelamat?

Pemilih subjek yang dicadangkan CSS 4 mungkin menawarkan potensi pada masa hadapan. Walau bagaimanapun, setakat ini, ciri ini masih tidak tersedia.

Kelas :has Pseudo

Walaupun kelas pseudo :has boleh membantu sebahagiannya, ia terhad kepada penggayaan pilih berdasarkan atribut HTML dan hanya apabila pilihan itu dipilih secara eksplisit pada mulanya. Hadnya menjadi jelas apabila pengguna menukar pilihan, yang mengubah suai sifat DOM tanpa menjejaskan atribut HTML yang CSS bergantung.

Penyelesaian CSS Sahaja

Walaupun batasan CSS, penyelesaian yang bijak wujud. Dengan memperkenalkan atribut pilihan data dengan penetapan nilai dalam acara onchange, kami boleh menyedarkan elemen pilih tentang pilihan semasa. Ini mewujudkan peluang untuk CSS menyasarkan dan menggayakan berdasarkan pilihan yang dipilih.

<select onchange="this.dataset.chosen = this.value;">
  ...
</select>

select[data-chosen="opt3"] { 
    border: 2px solid red;
}

Penyelesaian elegan ini memperkasakan CSS untuk menyesuaikan penampilan elemen pilihan berdasarkan pilihan yang dipilih tanpa memerlukan JavaScript.

Atas ialah kandungan terperinci Bolehkah CSS Menggayakan Elemen Pilih Berdasarkan Pilihan Terpilihnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!