当选中相应的复选框时,是否存在更改标签颜色的非JavaScript方式?
答案 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;
}
我喜欢依赖label
和input
元素的隐式关联,所以我会做这样的事情:
<label>
<input type="checkbox"/>
<span>Bah</span>
</label>
使用CSS:
:checked + span {
font-weight: bold;
}
答案 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')
})
这适用于所有浏览器