Podświetl etykietę, jeśli pole wyboru jest zaznaczone

Odpowiedzi:

147

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.

Andrew Marshall
źródło
2
To nie zadziała w IE 6-8, chyba że PO nie dba o IE.
Hussein,
25
Wiem, w mojej odpowiedzi zauważyłem, że będzie działać tylko w nowoczesnych przeglądarkach.
Andrew Marshall,
4
@ inf3rno Powinno. Zarówno sąsiedni selektor rodzeństwa, jak i :checkedselektor są wymienione jako obsługiwane w przeglądarce IE9. Potwierdzają to własne dokumenty Microsoftu .
Andrew Marshall
3
dobre rozwiązanie, ale jeśli element etykiety nie jest kolejnym przodkiem, powinieneś spróbować użyć selektora ~ zamiast selektora + 456bereastreet.com/archive/200601/css_3_selectors_explained (ostatni w tabeli)
Karl Adler
@abimelex Chociaż w zależności od twojego kodu HTML, może to zakończyć się dopasowaniem o wiele więcej znaków <label>niż jest to pożądane.
Andrew Marshall
101

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 labeloraz inputelementu, 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/

Walter Rumsby
źródło
Istnieje sztuczka polegająca na zmianie koloru tła etykiety nadrzędnej zaznaczonego pola wyboru. Dokonać przelewu etykiecie: ukryte, a następnie dać pole wyboru bardzo dużą dropshadow ... :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.
Aaron Cicali,
8

To jest przykład użycia :checkedpseudoklasy, aby uczynić formularze bardziej dostępnymi. :checkedPseudo-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>
Rozwiń fragment

Teocci
źródło
-24

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

Sprawdź działający przykład pod adresem http://jsfiddle.net/LgADZ/

Hussein
źródło
8
Pytanie nie powiedzieć non sposób Javascript oraz odpowiedź przed Cleary pokazałeś sposób, który działa tylko przy użyciu css
Kevin
2
Zaakceptowane rozwiązanie wykorzystuje sąsiedni selektor rodzeństwa, który jest w rzeczywistości cechą CSS 2.1 .
Walter Rumsby,
JQuery to jedyne rozwiązanie, które zapewni obsługę wielu przeglądarek.
Hussein,
7
Proszę, bądź ostrożny, Husajn. Możesz zapewnić obsługę przeglądarek, takich jak Internet Explorer 6, które nie obsługują sąsiedniego selektora rodzeństwa przy użyciu JavaScript . jQuery to biblioteka JavaScript, która pomoże Ci to zrobić; istnieją inne biblioteki (lub nawet czysty JavaScript!), z którymi możesz to zrobić.
Simon Lieschke
Odp .: mój wcześniejszy komentarz, nie zdawałem sobie sprawy, że :checkedpseudo selektor jest funkcją CSS3.
Walter Rumsby,