Sorot label jika kotak centang dicentang

Jawaban:

147

Jika Anda memiliki

<div>
  <input type="checkbox" class="check-with-label" id="idinput" />
  <label class="label-for-check" for="idinput">My Label</label>
</div>

Anda dapat melakukan

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

Lihat ini bekerja . Perhatikan bahwa ini tidak akan berfungsi di browser non-modern.

Andrew Marshall
sumber
2
Ini tidak akan berfungsi di IE 6-8, kecuali OP tidak peduli dengan IE.
Hussein
25
Saya tahu, saya mencatat bahwa itu hanya akan berfungsi di browser modern dalam jawaban saya.
Andrew Marshall
4
@ inf3rno Seharusnya. Kedua saudara pemilih yang berdekatan dan :checkedpemilih terdaftar sebagai didukung di IE9. Dokumen Microsoft sendiri mengkonfirmasi ini.
Andrew Marshall
3
solusi yang baik, tetapi jika elemen label bukan leluhur berikutnya, Anda harus mencoba menggunakan ~ selektor alih-alih selektor + 456bereastreet.com/archive/200601/css_3_selectors_explained (terakhir dalam tabel)
Karl Adler
@abimelex Meskipun tergantung pada HTML Anda yang mungkin akan cocok dengan lebih banyak <label>dari yang diinginkan.
Andrew Marshall
101

Saya suka saran Andrew, dan sebenarnya aturan CSS hanya perlu:

:checked + label {
   font-weight: bold;
}

Saya suka mengandalkan asosiasi implisit dari labeldan inputelemen, jadi saya akan melakukan sesuatu seperti ini:

<label>
   <input type="checkbox"/>
   <span>Bah</span>
</label>

dengan CSS:

:checked + span {
    font-weight: bold;
}

Contoh: http://jsfiddle.net/wrumsby/vyP7c/

Walter Rumsby
sumber
Ada trik untuk mengubah warna latar belakang label induk dari kotak centang. Membuat label overflow: hidden, kemudian memberikan kotak centang yang sangat besar dropshadow ... :checked { box-shadow: 0 0 0 500px orange; }. Anda harus bermain dengan indeks-z untuk memastikan setiap elemen saudara tidak disembunyikan.
Aaron Cicali
8

Ini adalah contoh penggunaan :checkedpseudo-class untuk membuat formulir lebih mudah diakses. Kelas :checkedsemu dapat digunakan dengan input tersembunyi dan labelnya yang terlihat untuk membuat widget interaktif, seperti galeri gambar. Saya membuat cuplikan untuk orang yang ingin menguji.

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 
<input type="checkbox" id="cb_name" name="cb_name"> 
<label for="cb_name">CSS is Awesome</label>
Luaskan cuplikan

Teocci
sumber
-24

Anda tidak dapat melakukan ini dengan CSS saja. Menggunakan jQuery bisa Anda lakukan

HTML

<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />

CSS

.highlight{
    background:yellow;
}

jQuery

$('#check').click(function(){
    $('#lab').toggleClass('highlight')
})

Ini akan bekerja di semua browser

Lihat contoh yang berfungsi di http://jsfiddle.net/LgADZ/

Hussein
sumber
8
Pertanyaannya memang mengatakan cara non javascript dan jawaban sebelum Anda jelas menunjukkan cara yang bekerja hanya menggunakan css
Kevin
2
Solusi yang diterima menggunakan pemilih saudara berdekatan yang sebenarnya merupakan fitur CSS 2.1 .
Walter Rumsby
JQuery adalah satu-satunya solusi yang akan memastikan dukungan lintas browser.
Hussein
7
Harap berhati-hati di sana, Hussein. Anda dapat memberikan dukungan untuk browser seperti Internet Explorer 6 yang tidak mendukung pemilih saudara yang berdekatan menggunakan JavaScript . jQuery adalah pustaka JavaScript yang akan membantu Anda melakukan ini; ada pustaka lain (atau bahkan JavaScript murni!) yang dapat Anda gunakan.
Simon Lieschke
Re: komentar saya sebelumnya, saya tidak menyadari bahwa :checkedpseudo selector adalah fitur CSS3.
Walter Rumsby