Bolehkah CSS Menggayakan Elemen `` Berdasarkan `` yang Dipilih?

Menggayakan Elemen Berdasarkan

Menggayakan elemen berdasarkan telah lama kelihatan mustahil dengan CSS tulen. Walaupun dapat menggayakan elemen secara langsung, perubahan hanya digunakan pada pilihan dalam senarai, bukan pilihan yang dipilih.

Penyelesaian JavaScript telah menawarkan penyelesaian, tetapi bolehkah CSS benar-benar memenuhi keperluan ini?

"Hold My Beer" Penyelesaian

Langkah 1: Kemas kini Nilai Elemen

Gunakan acara onchange untuk menetapkan nilai yang dipilih kepada atribut data tersuai pada unsur. Contohnya:

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

Langkah 2: Sasaran dan Gaya

Dengan nilai yang dipilih disimpan dalam atribut data, anda kini boleh menyasarkan

elemen menggunakan pemilih CSS:

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

Untuk contoh langsung, lihat CodePen ini: https://codepen.io/Aprilion/pen/xxx

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