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

Question

当选中相应的复选框时,是否有非javascript方式更改标签的颜色？

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

看到这个工作.请注意,这在非现代浏览器中不起作用.

我知道,我注意到它只能在我的答案中用于现代浏览器. (25认同)
@ inf3rno它应该.[邻近兄弟选择器](https://developer.mozilla.org/en/CSS/Adjacent_sibling_selectors)和[`:checked`选择器](https://developer.mozilla.org/En/CSS/:checked)在IE9中列出了支持.[微软自己的文档](http://msdn.microsoft.com/en-us/library/cc351024(v = vs.85).aspx)确认这一点. (4认同)
这在IE 6-8中不起作用,除非OP不关心IE. (2认同)
很好的解决方案,但如果标签元素不是下一个祖先,你应该尝试使用〜选择器而不是+选择器http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/(最后在表中) (2认同)
仅当“<label>”位于复选框后面时才有效；如果 `<label>` 标签包裹了复选框，那么似乎没有 CSS 方法可以让它工作。（例如，要更改复选框和标签周围的框的背景颜色，请参阅http://jsfiddle.net/ttL49ce9/） (2认同)

Answer 2

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

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

我喜欢靠的内隐联想label和input元素,所以我会做这样的事情:

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

用CSS:

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

Answer 3

这是使用: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>