Html 更改复选框标签 css 属性并选中复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21048368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change checkbox label css property with checkbox checked
提问by Michiel
I have the following html:
我有以下 html：
<label>
<input type="checkbox" value="cb_val" name="cb_name">
my checkbox text
</label>
With CSS I added a background-color to the <label>tag.
使用 CSS，我为<label>标签添加了背景颜色。
label { background-color:#333; color:#FFF; }
Now I'd liked to change the background color of the label when the checkbox is checked. I know how to do it with javascript, but is there a way to to it just using CSS?
现在我想在选中复选框时更改标签的背景颜色。我知道如何用 javascript 做到这一点，但是有没有办法只使用 CSS 来做到这一点？
I have seen some solutions, but they use the adjacent sibling selector and only work when the label appears after the checkbox.
我已经看到了一些解决方案，但它们使用相邻的兄弟选择器，并且仅当标签出现在复选框之后时才起作用。
I still hope to fix this without javascript, does anyone have a clue?
我仍然希望在没有 javascript 的情况下解决这个问题，有人知道吗？
UPDATE:
更新：
As I was afraid of, it cannot be done this way, so i must do it with JS, or achieve the same visual effect with a different HTML structure. I want to set the background color of the label and the textbox in one go, so I can go with a solution where the checkbox is placed absolute on top of the label. Good point PlantTheldea!
就怕这样不行，只能用JS来做，或者用不同的HTML结构来达到同样的视觉效果。我想一次性设置标签和文本框的背景颜色，因此我可以采用一种解决方案，将复选框绝对放置在标签顶部。好点PlantTheldea！
Or I can apply the background color to the label and the checkbox both.
或者我可以将背景颜色应用于标签和复选框。
Thanks everyone!
谢谢大家！
回答by Josh Powell
You can achieve this with pure css like so,
你可以像这样使用纯 css 来实现这一点，
<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
my checkbox text
</label>
With this css,
有了这个css，
label { background-color:#333; color:#FFF; }
input[type="checkbox"]:checked + label {
background: brown;
}
Keep in mind
记住
The label has to be after the checkbox so you will need to style it around more to keep the same look you had.
标签必须在复选框之后，因此您需要对其进行更多样式设置以保持与原来相同的外观。
Here is an option of styling it more to have the same appearance as you wanted, New fiddle. THIS DOES NOT involve positioning anything absolute, just some trickery.
这里有一个选项可以设置更多样式，使其具有您想要的相同外观，New fiddle。这不涉及定位任何绝对的东西，只是一些技巧。
回答by Joel Cox
You can't style the label itself directly via only CSS when the label is checked, but you can style a sibling of the checkbox.
选中标签时，您不能仅通过 CSS 直接设置标签本身的样式，但您可以设置复选框的同级样式。
HTML
HTML
<label>
<input class="check" type="checkbox" />
<span class="label-text">Checkbox</label>
</label>
CSS
CSS
label {
background: yellow;
}
label .label-text {
background: cyan;
}
label input.check:checked + .label-text {
background: lime;
}
You may also be able to fiddle with floats and padding to make the checkbox appear as if it was inside the .label-text span.
您也可以摆弄浮动和填充以使复选框看起来好像在 .label-text 范围内。
See the following links for browser support on the sibling selector: http://caniuse.com/css-sel2
有关同级选择器的浏览器支持，请参阅以下链接：http: //caniuse.com/css-sel2
Alternately as another answer said, you can style the label if it is a sibling of the checkbox - but then just like my answer still would not contain the checkbox in the label.
或者，正如另一个答案所说，如果标签是复选框的兄弟，您可以设置标签的样式 - 但就像我的答案仍然不会在标签中包含复选框一样。
