Markieren Sie die Beschriftung, wenn das Kontrollkästchen aktiviert ist

110

Gibt es eine nicht-Javascript-Methode zum Ändern der Farbe eines Etiketts, wenn das entsprechende Kontrollkästchen aktiviert ist?

html css Vladimir Keleshev
quelle
2
Mögliches Duplikat des CSS-Selektors für das Etikett eines aktivierten
Optionsfelds

Antworten:

147

Wenn Sie haben

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

du kannst tun

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

Sehen Sie, wie das funktioniert . Beachten Sie, dass dies in nicht modernen Browsern nicht funktioniert.

Andrew Marshall
quelle
2
Dies funktioniert in IE 6-8 nicht, es sei denn, OP kümmert sich nicht um IE.
Hussein
25
Ich weiß, ich habe festgestellt, dass es in meiner Antwort nur in modernen Browsern funktionieren würde.
Andrew Marshall
4
@ inf3rno Es sollte. Sowohl der benachbarte Geschwister-Selektor als auch der :checkedSelektor werden als in IE9 unterstützt aufgeführt. Microsoft-eigene Dokumente bestätigen dies.
Andrew Marshall
3
Gute Lösung, aber wenn das Label-Element nicht der nächste Vorfahr ist, sollten Sie versuchen, den Selektor ~ anstelle des Selektors + zu verwenden. 456bereastreet.com/archive/200601/css_3_selectors_explained (letzter in der Tabelle)
Karl Adler
@abimelex Obwohl abhängig von Ihrem HTML-Code möglicherweise viel mehr <label>s als gewünscht übereinstimmen .
Andrew Marshall
101

Ich mag Andrews Vorschlag, und tatsächlich muss die CSS-Regel nur lauten:

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

Ich verlasse mich gerne auf die implizite Assoziation des labelund des inputElements, also würde ich so etwas tun:

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

mit CSS:

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

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

Walter Rumsby
quelle
Es gibt einen Trick zum Ändern der Hintergrundfarbe der übergeordneten Beschriftung eines aktivierten Kontrollkästchens. Machen Sie das Etikett Überlauf: versteckt, dann geben Sie das Kontrollkästchen eine sehr große Schlagschatten ... :checked { box-shadow: 0 0 0 500px orange; }. Sie müssen mit Z-Indizes spielen, um sicherzustellen, dass Geschwisterelemente nicht ausgeblendet werden.
Aaron Cicali
8

Dies ist ein Beispiel für die Verwendung der :checkedPseudoklasse, um Formulare zugänglicher zu machen. Die :checkedPseudoklasse kann mit versteckten Eingaben und ihren sichtbaren Beschriftungen verwendet werden, um interaktive Widgets wie Bildergalerien zu erstellen. Ich habe das Snipped für die Leute erstellt, die es testen wollen.

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>
Erweitern Sie das Snippet

Teocci
quelle
-24

Sie können dies nicht allein mit CSS tun. Mit jQuery können Sie dies tun

HTML

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

CSS

.highlight{
    background:yellow;
}

jQuery

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

Dies funktioniert in allen Browsern

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/LgADZ/

Hussein
quelle
8
Die Frage sagte einen nicht Javascript Weg und die Antwort bevor Sie klar zeigten einen Weg, der nur mit CSS funktioniert
Kevin
2
Die akzeptierte Lösung verwendet den benachbarten Geschwister-Selektor, der tatsächlich ein Merkmal von CSS 2.1 ist .
Walter Rumsby
JQuery ist die einzige Lösung, die die browserübergreifende Unterstützung gewährleistet.
Hussein
7
Bitte seien Sie dort vorsichtig, Hussein. Sie können Browser wie Internet Explorer 6 unterstützen, die den angrenzenden Geschwister-Selektor nicht mit JavaScript unterstützen . jQuery ist eine JavaScript-Bibliothek, die Ihnen dabei hilft. Es gibt andere Bibliotheken (oder sogar reines JavaScript!), mit denen Sie dies tun können.
Simon Lieschke
Betreff: In meinem früheren Kommentar wurde mir nicht klar, dass der :checkedPseudo-Selektor eine CSS3-Funktion ist.
Walter Rumsby