Bagaimanakah Saya Boleh Menggayakan Label Butang Radio yang Disemak Hanya Menggunakan CSS?

Menggayakan Label Butang Radio yang Disemak

Dalam CSS, adalah mungkin untuk menggunakan gaya pada label yang dikaitkan dengan butang radio yang disemak, walaupun tanpa menggunakan tambahan elemen seperti div.

Adik Beradik Bersebelahan Combinator

Untuk menyasarkan label yang mengikuti input butang radio yang disemak serta-merta, gunakan penggabung adik beradik bersebelahan CSS ( ). Penggabung ini memadankan label yang bersebelahan dan mengikut elemen tertentu.

Sintaks:

input[type="radio"]:checked + label {
  /* Styles */
}

Contoh:

Pertimbangkan penanda HTML berikut:

<input>

Menggunakan penggabung saudara bersebelahan, anda boleh menggayakan label butang radio yang ditandakan seperti berikut:

input[type="radio"]:checked + label {
  font-weight: bold;
}

Keputusan:

Selepas memilih butang radio, label yang sepadan akan menjadi tebal, menunjukkan keadaannya yang ditandai. Teknik ini boleh digunakan dengan pelbagai sifat CSS untuk menyesuaikan penampilan butang radio yang diperiksa.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Label Butang Radio yang Disemak Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!