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

【问题标题】：Highlight label if checkbox is checked如果选中复选框，则突出显示标签
【发布时间】：2011-07-13 15:34:39
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

.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>

【讨论】：

这在 IE 6-8 中不起作用，除非 OP 不关心 IE。
我知道，我注意到它只适用于我的回答中的现代浏览器。
@inf3rno 它应该。 adjacent sibling selector 和 :checked selector 在 IE9 中都被列为支持。 Microsoft's own docs 确认。
很好的解决方案，但是如果标签元素不是下一个祖先，您应该尝试使用 ~ 选择器而不是 + 选择器 456bereastreet.com/archive/200601/css_3_selectors_explained（表中的最后一个）
这仅在<label> 跟随复选框时有效；如果<label> 标记包含复选框，那么似乎没有CSS 方法可以让它工作。（例如，要更改围绕复选框和标签的框的背景颜色，请参阅jsfiddle.net/ttL49ce9）

【解决方案2】：

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

我喜欢 Andrew 的建议，其实 CSS 规则只需：

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

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

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

使用 CSS：

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

【讨论】：

有一个技巧可以改变选中复选框的父标签的背景颜色。使标签溢出：隐藏，然后给复选框一个非常大的阴影...:checked { box-shadow: 0 0 0 500px orange; }。您需要使用 z-indexes 以确保没有隐藏任何同级元素。

【解决方案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/查看工作示例

【讨论】：

这个问题确实说的是一种非 javascript 方式，而在你清楚地展示了一种只使用 css 的方式之前的答案
公认的解决方案使用adjacent sibling selector，这实际上是CSS 2.1的一个特性。
JQuery 是唯一能确保跨浏览器支持的解决方案。
请注意侯赛因。您可以为不支持使用 JavaScript 的相邻兄弟选择器的浏览器（例如 Internet Explorer 6）提供支持。 jQuery 是一个 JavaScript 库，可以帮助您做到这一点；您可以使用其他库（甚至是纯 JavaScript！）。
回复：我之前的评论，我没有意识到 :checked pseudo selector 是 CSS3 功能。