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

选中相应的复选框后，是否可以使用非JavaScript方式更改标签的颜色？

如果你有

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

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

我喜欢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: #f00;
  font-style: normal;
} 

<input type="checkbox" id="cb_name" name="cb_name"> 
<label for="cb_name">CSS is Awesome</label> 

您不能仅凭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/中查看工作示例