更改复选框标签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！

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

谢谢大家！

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。这不涉及任何绝对的定位，只是一些诡计。

Answer 2

当选中标签时，您无法仅通过CSS直接设置标签样式，但您可以设置复选框的同级样式。

http://jsfiddle.net/QdDpL/

HTML

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

CSS

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

您也可以使用浮点数和填充来使复选框显示为好像它位于.label文本范围内。

有关兄弟选择器的浏览器支持，请参阅以下链接： http://caniuse.com/css-sel2

另外，如另一个答案所说，如果标签是复选框的兄弟，你可以设置标签的样式 - 但就像我的答案仍然不包含标签中的复选框一样。