İlgili onay kutusu işaretlendiğinde, bir etiketin rengini değiştirmenin javascript olmayan bir yolu var mı?
İlgili onay kutusu işaretlendiğinde, bir etiketin rengini değiştirmenin javascript olmayan bir yolu var mı?
Yanıtlar:
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.
:checkedseçici , IE9'da desteklendiği gibi listelenir. Microsoft'un kendi dokümanları bunu doğrulamaktadır.
<label>.
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;
}
:checked { box-shadow: 0 0 0 500px orange; }. Herhangi bir kardeş öğenin gizlenmediğinden emin olmak için z-dizinleriyle oynamanız gerekir.
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>
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
:checkedsözde seçicinin bir CSS3 özelliği olduğunu fark etmemiştim .