选中复选框时突出显示标签

当选中相应的复选框时，是否有一种非 javascript 的方式来改变标签的颜色？

189375 次浏览
小开
最佳答案

使用 相邻兄弟姐妹合并子:

.check-with-label:checked + .label-for-check {
font-weight: bold;
}
<div>
<input type="checkbox" class="check-with-label" id="idinput" />
<label class="label-for-check" for="idinput">My Label</label>
</div>

小开

你不能单独使用 CSS 来做这件事，你可以使用 jQuery 来做

超文本标示语言

<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/的工作实例

小开

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

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

我喜欢依赖于 label和 input元素的隐式关联，所以我会这样做:

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

使用 CSS:

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

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

小开

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

input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #0964aa;
font-style: normal;
} 
<input type="checkbox" id="cb_name" name="cb_name">
<label for="cb_name">CSS is Awesome</label>


提交答案