Bolehkah CSS Sendiri Menggayakan Elemen Pilihan Berdasarkan Pilihan Terpilihnya?

Menggunakan Gaya untuk Elemen Berdasarkan Pilihan Terpilih: Pendekatan CSS Sahaja

Secara tradisinya, menggayakan elemen berdasarkan pilihan yang dipilih bergantung pada penyelesaian JavaScript. Walau bagaimanapun, dengan CSS, kita kini boleh mencapai kesan ini semata-mata melalui CSS.

Cabaran: Menggayakan Elemen Pilihan

Percubaan untuk menggayakan elemen secara langsung hanya mempengaruhi penampilannya dalam senarai pilihan, bukan elemen yang dipilih.

pilih[name="qa_contact"] pilihan[value="3"] {
latar belakang: oren;
}

Penyelesaian: Memanfaatkan perubahan Acara

Untuk membuat elemen mengetahui pilihan yang dipilih, kami boleh menetapkan nilai kepada sifat yang dipilih data dalam acara onchange.

Kini, kita boleh menyasarkan dan menggayakan elemen berdasarkan nilai yang diberikan kepada sifat yang dipilih data.

pilih[data-chosen='opt3'] {
sempadan: 2px merah pepejal;
}

Dengan menggunakan pendekatan ini, kami berjaya menggunakan gaya pada elemen berdasarkan pilihan yang dipilih hanya menggunakan CSS.

Peningkatan CSS Masa Depan: Pemilih Subjek

Walaupun tidak mungkin untuk menggayakan

elemen berdasarkan pilihan yang dipilih dengan CSS 3, kemas kini seperti pemilih subjek dalam CSS 4 berpotensi memperkenalkan keupayaan ini pada masa hadapan. Walau bagaimanapun, masih tidak pasti sama ada ciri ini akan menjadi kenyataan.

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