更改 html 复选框的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5858780/
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
Changing the background color of an html checkbox
提问by risingTide
Is it possible, and if so how, to change the background color on an HTML checkbox? I'm specifically talking about the white box that is behind the little check symbol.
是否可以更改 HTML 复选框上的背景颜色，如果可以，如何更改？我特指的是小复选符号后面的白框。
I've searched quite a bit on this but haven't found a conclusive answer yet.
我已经对此进行了大量搜索，但还没有找到结论性的答案。
回答by BrunoLM
Only using scripts you can achieve a cross browser solution, see an example here of a styled checkbox....
使用脚本只有你可以实现跨浏览器的解决方案，在这里看到一个风格的复选框的例子...。
It is using jQuery UIto change the style
它使用jQuery UI来改变样式
回答by Udo G
I doubt that is possible since the check box appearance is OS-specific anyway (my checkboxes have a shadedgray background, not a white one).
我怀疑这是可能的，因为复选框的外观和具体的操作系统反正（我的复选框具有阴影灰色的背景，而不是白色的）。
A solution could be to build your own checkbox using JavaScript and some graphics.
一个解决方案可能是使用 JavaScript 和一些图形构建您自己的复选框。
回答by abaumg
AFAIK only Opera supports the "background" CSS statement for formular elements.
AFAIK 仅 Opera 支持公式元素的“背景”CSS 语句。
For further information, check this out: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/
有关更多信息，请查看：http: //www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/
回答by J punto Marcos
Jeff B showed another wayto color a checkbox. He also provided a jsfiddle example.
Jeff B 展示了另一种为复选框着色的方法。他还提供了一个 jsfiddle 示例。
The idea is to wrap a span and use a png image with some javascript and css.
这个想法是包装一个跨度并使用带有一些javascript和css的png图像。
回答by Novelink
I am implementing the colour Check box I thought it will be easy to do the color check box but when I started to implement it. it was so time taken Job to do the first time. below is the HTML and CSS for the COLOUR CHECK BOX any one can customized as well this HTML and CSS.
我正在实施颜色复选框我认为做颜色复选框很容易，但是当我开始实施它时。约伯第一次做这件事花了很长时间。下面是 COLOR CHECK BOX 的 HTML 和 CSS，任何人都可以自定义此 HTML 和 CSS。
HTML :-
HTML :-
<div class="squaredThree left">
<input type="checkbox" value="None" id="squaredThree" name="check" />
<label for="squaredThree"></label>
</div>
CSS:-
CSS:-
.squaredThree {
width: 20px;
position: relative;
}
.squaredThree label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0;
background:#f7f7f7;
border:1px solid #6d7279;
}
.squaredThree label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 2px;
left: 2px;
border: 3px solid #0b9dda;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.squaredThree input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
