Bagaimanakah Saya Boleh Menyerlahkan Label Kotak Semak Hanya Menggunakan CSS?

Menyerlahkan Label dengan Kotak Semak Bertanda Menggunakan CSS

Menyesuaikan penampilan label berdasarkan keadaan kotak semak yang sepadan adalah keperluan biasa dalam web pembangunan. Walaupun JavaScript menawarkan penyelesaian, terdapat helah CSS yang kemas yang boleh mencapai kesan ini tanpa sebarang skrip.

Untuk menyerlahkan label apabila kotak semak yang berkaitan ditandakan, kami boleh menggunakan penggabung saudara bersebelahan (" "). Penggabung ini memilih elemen yang sejurus selepas elemen rujukan, membolehkan kami menyasarkan label sejurus selepas setiap kotak pilihan.

Kod Contoh:

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

Dalam ini kod, kami menggunakan :checked pseudo-class untuk memilih kotak semak yang ditandakan dan menggunakan " " combinator untuk menyasarkan label bersebelahan dengan kelas .label-untuk-semak. Dengan menetapkan sifat berat fon kepada tebal, kami menyerlahkan label apabila kotak semak yang sepadan ditandai.

Struktur HTML:

Untuk menggunakan kod ini, pastikan anda mempunyai struktur HTML berikut:

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

Dengan menggunakan teknik CSS mudah ini, anda boleh menyerlahkan label dengan mudah dengan memanfaatkan status yang disemak kotak pilihan mereka yang berkaitan, memberikan pengalaman pengguna yang lebih interaktif dan menarik secara visual.

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