Evidenzia l'etichetta se la casella di controllo è selezionata


Risposte:


147

Se hai

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

tu puoi fare

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

Vedi questo lavoro . Tieni presente che questo non funzionerà nei browser non moderni.


2
Questo non funzionerà in IE 6-8, a meno che OP non si interessi di IE.
Hussein

25
Lo so, ho notato che funzionerebbe solo nei browser moderni nella mia risposta.
Andrew Marshall

4
@ inf3rno Dovrebbe. Sia il selettore di pari livello adiacente che il :checkedselettore sono elencati come supportati in IE9. I documenti di Microsoft lo confermano.
Andrew Marshall

3
buona soluzione, ma se l'elemento label non è il prossimo antenato dovresti provare a usare il ~ selector invece del + selector 456bereastreet.com/archive/200601/css_3_selectors_explained (ultimo nella tabella)
Karl Adler

@abimelex Anche se, a seconda del tuo HTML, potrebbe finire per corrispondere a molti più messaggi di <label>quanto desideri.
Andrew Marshall

101

Mi piace il suggerimento di Andrew, e in effetti la regola CSS deve essere solo:

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

Mi piace fare affidamento sull'associazione implicita di labele l' inputelemento, quindi farei qualcosa del genere:

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

con CSS:

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

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


C'è un trucco per cambiare il colore di sfondo dell'etichetta principale di una casella di controllo selezionata. Rendere l'overflow etichetta: hidden, quindi dare la casella di controllo una grande dropshadow ... :checked { box-shadow: 0 0 0 500px orange; }. Dovrai giocare con gli z-index per assicurarti che gli elementi di pari livello non siano nascosti.
Aaron Cicali

8

Questo è un esempio dell'utilizzo della :checkedpseudo-classe per rendere i form più accessibili. La :checkedpseudo-classe può essere utilizzata con input nascosti e le loro etichette visibili per creare widget interattivi, come le gallerie di immagini. Ho creato lo snipped per le persone che vogliono provare.

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

Non puoi farlo solo con i CSS. Usando jQuery puoi fare

HTML

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

CSS

.highlight{
    background:yellow;
}

jQuery

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

Funzionerà in tutti i browser

Controlla l'esempio funzionante su http://jsfiddle.net/LgADZ/


8
La domanda diceva un modo non javascript e la risposta prima di te mostrava chiaramente un modo che funziona usando solo css
Kevin

2
La soluzione accettata utilizza il selettore di pari livello adiacente che è in realtà una caratteristica di CSS 2.1 .
Walter Rumsby

JQuery è l'unica soluzione che garantirà il supporto cross browser.
Hussein

7
Per favore, stai attento lì Hussein. Puoi fornire supporto per browser come Internet Explorer 6 che non supportano il selettore di pari livello adiacente utilizzando JavaScript . jQuery è una libreria JavaScript che ti aiuterà a farlo; ci sono altre librerie (o anche JavaScript puro!) con cui puoi farlo.
Simon Lieschke

Ri: il mio commento precedente, non mi ero reso conto che lo :checkedpseudo selettore è una funzionalità CSS3.
Walter Rumsby
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.