Czy istnieje inny niż javascript sposób zmiany koloru etykiety, gdy zaznaczone jest odpowiednie pole wyboru?
Czy istnieje inny niż javascript sposób zmiany koloru etykiety, gdy zaznaczone jest odpowiednie pole wyboru?
Odpowiedzi:
Jeśli masz
<div>
<input type="checkbox" class="check-with-label" id="idinput" />
<label class="label-for-check" for="idinput">My Label</label>
</div>
możesz to zrobić
.check-with-label:checked + .label-for-check {
font-weight: bold;
}
Zobacz, jak to działa . Pamiętaj, że to nie zadziała w nienowoczesnych przeglądarkach.
:checked
selektor są wymienione jako obsługiwane w przeglądarce IE9. Potwierdzają to własne dokumenty Microsoftu .
<label>
niż jest to pożądane.
Podoba mi się sugestia Andrzeja i tak naprawdę reguła CSS musi brzmieć tylko:
:checked + label {
font-weight: bold;
}
Lubię powoływać się na niejawny stowarzyszenia label
oraz input
elementu, więc chciałbym zrobić coś takiego:
<label>
<input type="checkbox"/>
<span>Bah</span>
</label>
z CSS:
:checked + span {
font-weight: bold;
}
Przykład: http://jsfiddle.net/wrumsby/vyP7c/
:checked { box-shadow: 0 0 0 500px orange; }
. Będziesz musiał bawić się indeksami z, aby upewnić się, że żadne elementy rodzeństwa nie są ukryte.
To jest przykład użycia :checked
pseudoklasy, aby uczynić formularze bardziej dostępnymi. :checked
Pseudo-klasa może być używana z ukrytymi wejściami i ich widocznych etykiet budować interaktywne widżety, takie jak galerie zdjęć. Stworzyłem wycięte dla ludzi, którzy chcą testować.
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>
Nie możesz tego zrobić za pomocą samego CSS. Używając jQuery, możesz to zrobić
HTML
<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />
CSS
.highlight{
background:yellow;
}
jQuery
$('#check').click(function(){
$('#lab').toggleClass('highlight')
})
To zadziała we wszystkich przeglądarkach
:checked
pseudo selektor jest funkcją CSS3.