CSS“背景颜色”属性不能在<div>内的checkbox上工作
标题几乎可以解释它。 我有一个滚动div内的几个checkbox。 但由于某些原因，“背景色”属性不起作用。 虽然'保证金最高'似乎工作…
只是困惑我如何一个属性可以工作，而不是。 这也不像div有它自己的一套背景颜色属性，可能会骑在checkbox的属性。
无论如何，下面是我的HTML（它是由JSP生成的）：
<div class="listContainer"> <input type="checkbox" class="oddRow">item1<br/> <input type="checkbox" class="evenRow">item2<br/> <input type="checkbox" class="oddRow">item3<br/> <input type="checkbox" class="evenRow">item4<br/> ... </div> 这里是我的CSS：
.listContainer { border:2px solid #ccc; width:340px; height: 225px; overflow-y: scroll; margin-top: 20px; padding-left: 10px; } .oddRow { margin-top: 5px; background-color: #ffffff; } .evenRow{ margin-top: 5px; background-color: #9FFF9D; }
在此先感谢任何能指引我正确方向的人！
一个checkbox没有背景颜色，你可能想要做的是用一个具有颜色的div包装每个checkbox。 你的输出应该是这样的：
<div class="evenRow"> <input type="checkbox" /> </div> <div class="oddRow"> <input type="checkbox" /> </div> <div class="evenRow"> <input type="checkbox" /> </div> <div class="oddRow"> <input type="checkbox" /> </div>
除了目前接受的答案：你可以设置checkbox/单选button的边框和背景，但是到底是如何渲染的取决于浏览器。 例如，如果您在checkbox上设置了红色背景
- IE将显示一个红色边框，而不是
- Opera将按照预期显示红色背景
- Firefox，Safari和Chrome将无能为力
本文至less比较一些浏览器和IE的行为。 它可能会更老一些（还包括网景），但是当你testing你会发现没有太大的变化。 另一个比较可以在这里find。
你可以使用像这样的伪元素：
<label >Checkbox label <input type="checkbox"> </label> input[type=checkbox] { width: 30px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 27px; } input[type=checkbox]:after { content: " "; background-color: #9FFF9D; display: inline-block; visibility: visible; } input[type=checkbox]:checked:after { content: "\2714"; }
当您input身体标记时，只需按一次空格而不closures标记，并inputbgcolor="red" ，例如。 然后为您的字体select一个比较颜色。
