Mengapa CSS Saya Tidak Menggayakan Label Butang Radio Pilihan Saya?

Menggayakan Label Butang Radio Terpilih: Penyelesaian Masalah

Anda cuba menggayakan label butang radio yang dipilih, tetapi gaya yang diingini bukan tidak digunakan. Mari kita periksa sebabnya dan betulkan.

HTML anda betul dan CSS yang anda berikan termasuk peraturan untuk menggayakan input radio dan labelnya. Masalahnya terletak pada pemilih untuk butang radio yang diperiksa:

.radio-toolbar label + input[type="radio"]:checked {
    background:pink !important;
}

Pemilih ini menyasarkan elemen input, yang disembunyikan menggunakan display:none. Apabila anda menyemak butang radio, atribut yang disemak ditambahkan pada inputnya, bukan pada labelnya. Untuk menggayakan label, anda perlu memilih elemen label itu sendiri:

.radio-toolbar label[for]:checked {
    background: pink !important;
}

Di sini, kami menggunakan pemilih atribut [untuk] untuk memilih label yang dikaitkan dengan butang radio yang ditandai. CSS yang dikemas kini harus berfungsi seperti yang diharapkan.

Ingat untuk turut menyertakan sifat paparan untuk label untuk menjadikannya kelihatan:

.radio-toolbar label {
    ...
    display: inline-block;
    ...
}

Atas ialah kandungan terperinci Mengapa CSS Saya Tidak Menggayakan Label Butang Radio Pilihan Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!