html - 更改复选框标签 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 来实现它？

我看过一些解决方案，但它们使用了相邻的同级选择器，并且只有当标 checkout 现在复选框之后时才有效。

我仍然希望不用 javascript 来解决这个问题，有人知道吗？

更新:

因为我担心，这样不行，所以我必须用JS来做，或者用不同的HTML结构达到相同的视觉效果。 我想一次性设置标签和文本框的背景颜色，所以我可以采用将复选框绝对放置在标签顶部的解决方案。好点 PlantTheldea!

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

谢谢大家!

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

牢记

标签必须位于复选框之后，因此您需要对其进行更多样式设置以保持与原来相同的外观。

这里有一个选项，可以对其进行更多样式设置以使其具有与您想要的相同的外观，New fiddle .这不涉及定位任何绝对的东西，只是一些技巧。