html – 选中复选框标签css属性并选中复选框

概述我有以下html： <label> <input type="checkbox" value="cb_val" name="cb_name"> my checkbox text </label> 使用CSS我在< label>中添加了背景色.标签. label { background-color:#333; color:#FFF; } 现在,我想在选中复选框时更改标签的背 我有以下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！

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

感谢大家！

解决方法 你可以用这样的纯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.这不涉及任何绝对的定位,只是一些诡计.

总结

以上是内存溢出为你收集整理的html – 选中复选框标签css属性并选中复选框全部内容，希望文章能够帮你解决html – 选中复选框标签css属性并选中复选框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。