Bolehkah saya Menggayakan Label Berdasarkan Keadaan Kotak Semaknya Hanya Menggunakan CSS?

Menggayakan Label Berdasarkan Status Kotak Semak tanpa JavaScript

Soalan:

Adakah mungkin untuk ubah suai penggayaan label berdasarkan keadaan bertanda kotak semak yang sepadan tanpa menggunakan JavaScript?

Jawapan:

Ya, mungkin menggunakan adik beradik yang bersebelahan dalam CSS.

Penjelasan:

Dengan menggunakan penggabung adik beradik bersebelahan ( ), anda boleh menyasarkan elemen yang serta-merta mengikuti a elemen yang ditentukan. Dalam kes ini, kami menggunakannya untuk menggayakan label (.label-for-check) yang bersebelahan dengan kotak pilihan yang ditandai (.check-with-label:checked).

Contoh:

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

<div>
  <input type="checkbox" class="check-with-label">

Dalam contoh ini, apabila kotak semak dengan ID "idinput" ditandakan, label "Label Saya" yang mengikutinya akan menjadi berani. Ini kerana label itu memenuhi syarat berikut:

• Ia bersebelahan dengan kotak pilihan yang ditandai kerana penggabung.
• Ia sepadan dengan pemilih kelas .label-for-check.

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