Bolehkah saya Menggayakan Elemen Pilihan Berdasarkan Pilihan Terpilih Hanya Menggunakan CSS?

Gaya Elemen Berdasarkan

Bolehkah anda menggayakan elemen berdasarkan hanya menggunakan CSS?

Walaupun kepercayaan popular, memang mungkin untuk menggayakan elemen berdasarkan menggunakan CSS semata-mata.

Buah terlarang? Tidak lagi.

Secara tradisinya, menggayakan elemen sahaja hanya akan mengubah suai rupa pilihan dalam senarai juntai bawah, bukan unsur itu sendiri. Walau bagaimanapun, kemajuan moden dalam CSS telah memperkenalkan sempadan baharu kemungkinan.

Masukkan kelas pseudo :has().

Dalam penyemak imbas yang menyokong kedua-dua :has () kelas pseudo dan penggayaan elemen, anda boleh memanfaatkan kod berikut:

select:has(option[selected][value="3"]) {
  background: orange;
}

Kod ini akan menggunakan latar belakang oren pada elemen apabila dengan nilai '3' dipilih.

Tetapi tunggu, ada lagi!

CSS juga membolehkan anda membuat elemen responsif kepada perubahan dalam pilihan yang dipilih melalui acara onchange. Dengan menetapkan atribut pilihan data bagi elemen kepada nilai pilihan yang dipilih, anda boleh mencipta penggayaan dinamik berdasarkan interaksi pengguna.

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

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

Dengan pendekatan ini, anda mempunyai kawalan sepenuhnya ke atas penampilan elemen berdasarkan dan nilainya, membolehkan pelbagai kemungkinan penyesuaian.

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