更改复选框选中时的标签 CSS 属性

Question

我有以下html代码：

  <label>
     <input type="checkbox" value="cb_val" name="cb_name">
     my checkbox text
  </label>

我使用CSS为<label>标签添加了背景颜色。

label { background-color:#333; color:#FFF; }

现在我想在勾选复选框时更改标签的背景颜色。 我知道如何通过JavaScript实现，但是否有一种只使用CSS的方法呢？

我已经看到一些解决方案，但它们使用相邻兄弟选择器，并且仅在标签出现在复选框之后时起作用。

我仍然希望在不使用JavaScript的情况下解决此问题，有人有线索吗？

更新：

正如我所担心的那样，无法以这种方式完成，因此我必须使用JS或使用不同的HTML结构来实现相同的视觉效果。 我希望一次设置标签和文本框的背景颜色，因此可以使用将复选框绝对放置在标签上方的解决方案。好主意 PlantTheldea！

或者我可以将背景颜色应用于标签和复选框两者。

谢谢大家！

- Michiel

---

目前还没有父级选择器，因此您无法根据子输入元素的条件更改父标签元素。没有JavaScript。 - j08691

Answer 1

你可以通过纯CSS来实现这一点，如下所示：

<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
     my checkbox text
</label>

使用这个CSS样式，

label { background-color:#333; color:#FFF; }

input[type="checkbox"]:checked + label {
    background: brown;
}

JSFIDDLE

请注意

标签必须放在复选框后面，因此您需要对其进行更多的样式修饰，以保持与原来相同的外观。

这里有一个样式选项，可以让它的外观与您想要的相同，新的代码片段。这并不会涉及任何绝对定位，只是一些小技巧。

- Josh Powell

---

我知道这一点，但在你的情况下，输入不是嵌套在标签中的。我甚至在我的问题中说过，我知道使用相邻兄弟选择器（+）的解决方案。 - Michiel

@MichielReyers - 那么问题就在于为什么你需要它嵌套在标签中？如果您设置for属性，任何浏览器都可以正常工作。我编辑了答案来展示这一点，如果您点击标签，它将选择复选框。 - PlantTheIdea

@MichielReyers，你说过你知道如何使用脚本来解决这个问题，然后你又要求一个纯CSS的解决方案。那就是纯CSS的解决方案。我还说过，“标签必须在复选框之后，所以你需要更多地围绕它进行样式设置，以保持与原来相同的外观。”。 - Josh Powell

@PlantTheldea 你说得对，我想一次性设置标签和文本框的背景颜色，可以采用将复选框绝对定位在标签上方的解决方案。很好的观点！ - Michiel

@MichielReyers - position:absolute 可以使用，但我并不是在推荐它。通过给复选框设置一个 id，然后将标签的 for 属性设置为匹配该 id，您将创建您正在寻找的“一体化”关系。请参见更新的答案和 jsFiddle。 - PlantTheIdea

@MichielReyers，请参考我在底部的回答编辑。 - Josh Powell

Answer 2

当复选框被选中时，你不能直接通过CSS样式来直接修改标签本身的样式，但你可以修改其兄弟元素的样式。

http://jsfiddle.net/QdDpL/

HTML

<label>
    <input class="check" type="checkbox" />
    <span class="label-text">Checkbox</span>
</label>

CSS

label {
    background: yellow;
}
label .label-text {
    background: cyan;
}
label input.check:checked + .label-text {
    background: lime;
}

你可能还可以调整浮动和填充来使复选框看起来像是在.label-text span内部。

查看以下链接以获取关于同级选择器的浏览器支持情况： http://caniuse.com/css-sel2 另外，正如其他答案所说，如果标签与复选框是兄弟元素，则可以为其设置样式，但仍然不会将复选框包含在标签中。

- Joel Cox