Bolehkah CSS Sendiri Menggayakan Label Berdasarkan Keadaan Kotak Semak Berkaitannya?

Mengubah Suai Penampilan Label Berdasarkan Keadaan Kotak Semak Tanpa JavaScript

Bolehkah CSS digunakan untuk mengawal penampilan label berdasarkan keadaan - ditanda atau tidak ditanda - yang berkaitan kotak semak?

Pendekatan:

Untuk mencapai pengubahsuaian ini tanpa JavaScript, penggabung saudara bersebelahan CSS boleh digunakan. Dengan mentakrifkan peraturan CSS yang menyasarkan elemen label bersebelahan dengan elemen kotak pilihan yang ditandai, pengubahsuaian gaya tertentu boleh digunakan apabila kotak pilihan berada dalam keadaan yang ditandai.

Ilustrasi Kod:

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

Dalam coretan kod ini, peraturan CSS menyasarkan mana-mana elemen input dengan nama kelas "check-with-label" dalam keadaannya yang diperiksa. Penggabung adik beradik bersebelahan " " digunakan untuk memilih label dengan nama kelas "label-untuk-semak" yang mengikuti kotak semak yang ditandakan.

Apabila kotak semak "tanda-dengan-label" ditandakan, "label-for-check" akan menggunakan pengubahsuaian gaya yang ditentukan, dalam kes ini menjadikan berat fonnya lebih berani.

Contoh Penandaan:

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

Kesimpulan:

Menggunakan penggabung saudara bersebelahan dalam CSS menyediakan kaedah yang konsisten untuk mengubah penampilan label bergantung pada keadaan elemen kotak pilihan yang disertakan, menghapuskan keperluan untuk JavaScript dalam senario khusus ini.

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