Destaque o rótulo se a caixa de seleção estiver marcada

110

Existe uma maneira não-JavaScript de alterar a cor de um rótulo quando a caixa de seleção correspondente está marcada?

html css Vladimir Keleshev
fonte
2
Possível duplicata do seletor
Denilson Sá Maia

Respostas:

147

Se você tem

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

você pode fazer

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

Veja isso funcionando . Observe que isso não funcionará em navegadores não modernos.

Andrew Marshall
fonte
2
Isso não funcionará no IE 6-8, a menos que o OP não se importe com o IE.
Hussein,
25
Eu sei, observei que só funcionaria em navegadores modernos em minha resposta.
Andrew Marshall
4
@ inf3rno Deveria. Tanto o seletor irmão adjacente quanto o :checkedseletor são listados como compatíveis com o IE9. Os próprios documentos da Microsoft confirmam isso.
Andrew Marshall,
3
boa solução, mas se o elemento de rótulo não for o próximo ancestral, você deve tentar usar o seletor ~ ao invés do seletor + 456bereastreet.com/archive/200601/css_3_selectors_explained (último na tabela)
Karl Adler
@abimelex Embora dependendo do seu HTML isso pode acabar correspondendo a muito mais <label>s do que o desejado.
Andrew Marshall
101

Gosto da sugestão de Andrew e, na verdade, a regra CSS só precisa ser:

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

Eu gosto de contar com a associação implícita labeldo inputelemento e, então, faria algo assim:

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

com CSS:

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

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

Walter Rumsby
fonte
Há um truque para alterar a cor de fundo do rótulo pai de uma caixa de seleção marcada. Faça o estouro etiqueta: escondido, em seguida, dar a caixa de um grande dropshadow ... :checked { box-shadow: 0 0 0 500px orange; }. Você precisará brincar com os índices z para garantir que quaisquer elementos irmãos não sejam ocultados.
Aaron Cicali
8

Este é um exemplo de uso da :checkedpseudoclasse para tornar os formulários mais acessíveis. A :checkedpseudo classe pode ser usada com entradas ocultas e seus rótulos visíveis para construir widgets interativos, como galerias de imagens. Eu criei o recorte para as pessoas que querem testar.

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 trecho

Teocci
fonte
-24

Você não pode fazer isso apenas com CSS. Usando jQuery você pode fazer

HTML

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

CSS

.highlight{
    background:yellow;
}

jQuery

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

Isso funcionará em todos os navegadores

Verifique o exemplo de trabalho em http://jsfiddle.net/LgADZ/

Hussein
fonte
8
A pergunta dizia uma maneira não javascript e a resposta antes de você claramente mostrou uma maneira que funciona usando apenas css
Kevin
2
A solução aceita usa o seletor irmão adjacente, que na verdade é um recurso do CSS 2.1 .
Walter Rumsby
JQuery é a única solução que garantirá suporte a navegadores cruzados.
Hussein,
7
Por favor, tenha cuidado, Hussein. Você pode fornecer suporte para navegadores como o Internet Explorer 6 que não são compatíveis com o seletor irmão adjacente usando JavaScript . jQuery é uma biblioteca JavaScript que o ajudará a fazer isso; existem outras bibliotecas (ou mesmo JavaScript puro!) com as quais você pode fazer isso.
Simon Lieschke,
Re: meu comentário anterior, não percebi que o :checkedpseudo seletor é um recurso CSS3.
Walter Rumsby