Onay kutusu işaretliyse etiketi vurgulayın


Yanıtlar:


147

Eğer varsa

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

yapabilirsin

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

Bunun işe yaradığını görün . Bunun modern olmayan tarayıcılarda çalışmayacağını unutmayın.


2
OP IE'yi önemsemediği sürece bu IE 6-8'de çalışmayacaktır.
Hüseyin

25
Biliyorum, cevabımda sadece modern tarayıcılarda işe yarayacağını belirttim.
Andrew Marshall

4
@ inf3rno Olması gerekir. Hem komşu kardeş seçici hem de :checkedseçici , IE9'da desteklendiği gibi listelenir. Microsoft'un kendi dokümanları bunu doğrulamaktadır.
Andrew Marshall

3
iyi bir çözüm, ancak etiket öğesi sonraki ata değilse, + seçici yerine ~ seçiciyi kullanmayı denemelisiniz 456bereastreet.com/archive/200601/css_3_selectors_explained (tablodaki son)
Karl Adler

@abimelex HTML'nize bağlı olarak, istenenden çok daha fazla URL ile eşleşebilir <label>.
Andrew Marshall

101

Andrew'un önerisini beğendim ve aslında CSS kuralının şu şekilde olması gerekiyor:

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

Ben örtük bir dernek güvenmek ister labelve inputben böyle bir şey yapmak istiyorum, böylece eleman:

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

CSS ile:

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

Örnek: http://jsfiddle.net/wrumsby/vyP7c/


İşaretli bir onay kutusunun üst etiketinin arka plan rengini değiştirmek için bir numara vardır . Etiket taşması olun: gizlenmiş, sonra çok büyük bir dropshadow ... onay kutusunu vermek :checked { box-shadow: 0 0 0 500px orange; }. Herhangi bir kardeş öğenin gizlenmediğinden emin olmak için z-dizinleriyle oynamanız gerekir.
Aaron Cicali

8

Bu, :checkedformları daha erişilebilir hale getirmek için sözde sınıfı kullanmanın bir örneğidir . :checkedSözde sınıfı, resim galerileri gibi etkileşimli widget'lara oluşturmak için gizli giriş ve bunların görünür etiketlerle kullanılabilir. Test etmek isteyenler için kırpılmış olanı yarattım.

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> 


-24

Bunu yalnızca CSS ile yapamazsınız. JQuery kullanarak yapabilecekleriniz

HTML

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

CSS

.highlight{
    background:yellow;
}

jQuery

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

Bu tüm tarayıcılarda çalışacak

Http://jsfiddle.net/LgADZ/ adresindeki çalışma örneğini kontrol edin


8
Soru javascript olmayan bir yol söylüyordu ve sizden önce cevap sadece css kullanarak işe yarayan bir yol gösterdi
Kevin

2
Kabul edilen çözüm , aslında CSS 2.1'in bir özelliği olan bitişik kardeş seçiciyi kullanır .
Walter Rumsby

JQuery, çapraz tarayıcı desteği sağlayacak tek çözümdür.
Hüseyin

7
Lütfen dikkatli ol Hüseyin. JavaScript kullanarak komşu kardeş seçiciyi desteklemeyen Internet Explorer 6 gibi tarayıcılar için destek sağlayabilirsiniz . jQuery , bunu yapmanıza yardımcı olacak bir JavaScript kitaplığıdır; bunu birlikte yapabileceğiniz başka kütüphaneler (hatta saf JavaScript!) var.
Simon Lieschke

Re: önceki yorumumda, :checkedsözde seçicinin bir CSS3 özelliği olduğunu fark etmemiştim .
Walter Rumsby
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.