Html CSS ''background-color' 属性不适用于 <div> 内的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7398462/
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
CSS ''background-color" attribute not working on checkbox inside <div>
提问by dov.amir
The heading pretty much explains it. I have a couple of checkboxes inside a scrollable div. But for some reasons the 'background-color' attribute doesn't work. Although the 'margin-top' does seem to work...
标题几乎解释了它。我在可滚动的 div 中有几个复选框。但由于某些原因，'background-color' 属性不起作用。尽管“边缘顶部”似乎确实有效......
Just puzzling me how one attribute can work and another not. It's also not like the div has it's own set of background color attributes that could potentially over ride the checkboxes attributes.
只是让我困惑一个属性如何起作用而另一个属性不起作用。它也不像 div 有它自己的一组背景颜色属性，这些属性可能会覆盖复选框属性。
Anyways, below is my HTML (which is generated by JSP):
无论如何，下面是我的 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>
And here is my CSS:
这是我的 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;
}
Thanks in advance for anyone that can point me in the right direction!
提前感谢任何能指出我正确方向的人！
回答by dov.amir
A checkbox does not have background color, what you might want to do is wrap each checkbox with a div that has the color. your output should be something like this:
复选框没有背景颜色，您可能想要做的是用具有颜色的 div 包裹每个复选框。你的输出应该是这样的：
<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>
回答by Louise
In addition to the currently accepted answer: You can set border and background of a checkbox/radiobutton, but how it is rendered in the end depends on the browser. For example, if you set a red background on a checkbox
除了当前接受的答案：您可以设置复选框/单选按钮的边框和背景，但最终呈现方式取决于浏览器。例如，如果您在复选框上设置红色背景
- IE will show a red border instead
- Opera will show a red background as intended
- Firefox, Safari and Chrome will do nothing
- IE 将显示红色边框
- Opera 将按预期显示红色背景
- Firefox、Safari 和 Chrome 将无所作为
This articlecompares a few browsers and explains at least the IE behavior. It maybe bit older (still including Netscape), but when you test around you'll notice that not much has changed. Another comparison can be found here.
本文比较了几种浏览器，并至少解释了 IE 的行为。它可能有点旧（仍然包括 Netscape），但是当您进行测试时，您会发现并没有太大变化。另一个比较可以在这里找到。
回答by Diego Lins de Freitas
You can use peseudo elements like this:
您可以像这样使用伪元素：
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: "14";
}<label>Checkbox label
<input type="checkbox">
</label>回答by agirault
My solution
我的解决方案
Initially posted here.
最初张贴在这里。
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
input[type="checkbox"]:after {
content: '';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>回答by lilhamad
After so much trouble i got it.
经过这么多的麻烦我明白了。
.purple_checkbox:after {
content: " ";
background-color: #5C2799;
display: inline-block;
visibility: visible;
}
.purple_checkbox:checked:after {
content: "14";
box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
border-radius: 3px;
height: 12px;
display: block;
width: 12px;
text-align: center;
font-size: 9px;
color: white;
}
It will be like this when checked with this code.
用这段代码检查时会是这样。
回答by Dennis T
Improving another answer here
在这里改进另一个答案
input[type=checkbox] {
cursor: pointer;
margin-right: 10px;
}
input[type=checkbox]:after {
content: " ";
background-color: lightgray;
display: inline-block;
position: relative;
top: -4px;
width: 24px;
height: 24px;
margin-right: 10px;
}
input[type=checkbox]:checked:after {
content: "input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
content: "?";
font-size: 12px;
}
a014";
}
回答by B.Abdelbasset
The Best solution to change background checkbox color
更改背景复选框颜色的最佳解决方案
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>回答by Friendly Banana
When you input the body tag, press space just one time without closing the tag and input bgcolor="red", just for instance. Then choose a diff color for your font.
例如，当您输入 body 标签时，只需按一次空格而不关闭标签并输入bgcolor="red"。然后为您的字体选择一种差异颜色。
