Resalte la etiqueta si la casilla de verificación está marcada

Respuestas:

147

Si usted tiene

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

tu puedes hacer

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

Vea esto funcionando . Tenga en cuenta que esto no funcionará en navegadores no modernos.

Andrew Marshall
fuente
2
Esto no funcionará en IE 6-8, a menos que a OP no le importe IE.
Hussein
25
Lo sé, noté que solo funcionaría en navegadores modernos en mi respuesta.
Andrew Marshall
4
@ inf3rno Debería. Tanto el selector de hermanos adyacentes como el :checkedselector se enumeran como compatibles en IE9. Los propios documentos de Microsoft lo confirman.
Andrew Marshall
3
buena solución, pero si el elemento de etiqueta no es el próximo antepasado, debería intentar usar el selector ~ en lugar del selector + 456bereastreet.com/archive/200601/css_3_selectors_explained (último en la tabla)
Karl Adler
@abimelex Aunque dependiendo de su HTML, puede terminar haciendo coincidir muchos más <label>s de los deseados.
Andrew Marshall
101

Me gusta la sugerencia de Andrew y, de hecho, la regla CSS solo necesita ser:

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

Me gusta confiar en la asociación implícita de labely el inputelemento, así que haría algo como esto:

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

con CSS:

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

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

Walter Rumsby
fuente
Existe un truco para cambiar el color de fondo de la etiqueta principal de una casilla de verificación marcada. Hacer que el desbordamiento de la etiqueta: oculto, a continuación, dar la casilla de verificación una gran dropshadow ... :checked { box-shadow: 0 0 0 500px orange; }. Deberá jugar con índices z para asegurarse de que los elementos hermanos no estén ocultos.
Aaron Cicali
8

Este es un ejemplo del uso de la :checkedpseudoclase para hacer que los formularios sean más accesibles. La :checkedpseudoclase se puede utilizar con entradas ocultas y sus etiquetas visibles para crear widgets interactivos, como galerías de imágenes. Creé el recorte para las personas que quieran probar.

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>
Expandir fragmento

Teocci
fuente
-24

No puedes hacer esto solo con CSS. Usando jQuery puedes hacer

HTML

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

CSS

.highlight{
    background:yellow;
}

jQuery

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

Esto funcionará en todos los navegadores.

Consulte el ejemplo de trabajo en http://jsfiddle.net/LgADZ/

Hussein
fuente
8
La pregunta decía una forma que no era de JavaScript y la respuesta antes de aclarar mostraba una forma que funciona usando solo css
Kevin
2
La solución aceptada utiliza el selector de hermanos adyacente, que en realidad es una característica de CSS 2.1 .
Walter Rumsby
JQuery es la única solución que garantizará la compatibilidad con varios navegadores.
Hussein
7
Por favor, tenga cuidado, Hussein. Puede proporcionar compatibilidad con navegadores como Internet Explorer 6 que no admiten el selector de hermanos adyacente mediante JavaScript . jQuery es una biblioteca de JavaScript que le ayudará a hacer esto; hay otras bibliotecas (¡o incluso JavaScript puro!) con las que puede hacer esto.
Simon Lieschke
Re: mi comentario anterior, no me di cuenta de que el :checkedpseudo selector es una característica de CSS3.
Walter Rumsby