如果选中复选框,则突出显示标签

时间:2011-03-11 16:54:41

标签: html css

当选中相应的复选框时,是否存在更改标签颜色的非JavaScript方式?

4 个答案:

答案 0 :(得分:135)

如果你有

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

你可以做到

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

See this working。请注意,这在非现代浏览器中不起作用。

答案 1 :(得分:96)

我喜欢Andrew的建议,事实上CSS规则只需要:

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

我喜欢依赖labelinput元素的隐式关联,所以我会做这样的事情:

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

使用CSS:

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

示例:http://jsfiddle.net/wrumsby/vyP7c/

答案 2 :(得分:5)

这是使用:checked伪类使表单更易访问的示例。 :checked伪类可以与隐藏输入及其可见标签一起使用,以构建交互式小部件,例如图像库。我为想要测试的人创建了剪辑。

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> 

答案 3 :(得分:-23)

单独使用CSS无法做到这一点。使用jQuery你可以做到

<强> HTML

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

<强> CSS

.highlight{
    background:yellow;
}

<强>的jQuery

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

这适用于所有浏览器

检查http://jsfiddle.net/LgADZ/

处的工作示例