如果checkbox被选中，高亮显示标签

是否有一个非JavaScript的方式来改变相应的checkbox被选中时，标签的颜色？

Answer 1

如果你有

<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; } 

看到这个工作 。 请注意，这不适用于非现代浏览器。

Answer 2

我喜欢安德鲁的build议，实际上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/

Answer 3

这是使用:checked伪类使表单更易于访问的一个例子。 被:checked伪类可以与隐藏的input和它们的可见标签一起使用来构build交互式小部件，比如图像库。 我为那些想要testing的人创build了剪辑。

 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> 

Answer 4

你不能单独使用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/检查工作示例;