Existe uma maneira não-JavaScript de alterar a cor de um rótulo quando a caixa de seleção correspondente está marcada?
Existe uma maneira não-JavaScript de alterar a cor de um rótulo quando a caixa de seleção correspondente está marcada?
Respostas:
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.
:checkedseletor são listados como compatíveis com o IE9. Os próprios documentos da Microsoft confirmam isso.
<label>s do que o desejado.
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/
: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.
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>
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
:checkedpseudo seletor é um recurso CSS3.