Bagaimanakah Saya Boleh Menggayakan Label Berdasarkan Status Kotak Semak Hanya Menggunakan CSS?

Menggayakan Label Berdasarkan Status Kotak Semak Tanpa JavaScript

Banyak senario dalam pembangunan web melibatkan paparan maklumat berdasarkan input pengguna. Satu contoh biasa ialah menogol penampilan label apabila kotak semak yang sepadan ditandakan atau dinyahtandai. Walaupun JavaScript menyediakan cara yang mudah untuk mencapai matlamat ini, artikel ini meneroka penyelesaian CSS tulen.

Penggabung Adik Beradik Bersebelahan

Kunci kepada teknik ini terletak pada penggabung adik beradik bersebelahan ( ). Pemilih ini membolehkan anda menyasarkan elemen yang bersebelahan dan didahului oleh elemen lain dalam pepohon DOM logik. Dalam kes kami, kami mahu menyasarkan elemen label yang datang serta-merta selepas kotak pilihan.

Pertimbangkan struktur HTML berikut:

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

Menggayakan Label

Sekarang, menggunakan penggabung saudara bersebelahan, kita boleh menulis peraturan CSS yang menyasarkan elemen label hanya apabila kotak semak sebelumnya adalah diperiksa:

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

Peraturan ini menyatakan bahawa mana-mana elemen dengan kelas "check-with-label" yang berada dalam keadaan ditandai akan mempunyai elemen adik beradik bersebelahan dengan kelas "label-for-check" digayakan dengan berat fon tebal.

Contoh:

Menggunakan peraturan CSS ini pada contoh HTML yang diberikan akan menghasilkan sesuatu seperti ini:

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

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

Output:

My Label (bold)

Dalam kes ini, "Label Saya" akan dipaparkan dalam huruf tebal kerana kotak pilihan sebelumnya ditandakan, menunjukkan bahawa teknik CSS tulen ini berjaya menukar penampilan label berdasarkan status kotak pilihan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Label Berdasarkan Status Kotak Semak Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!