CSS 样式复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1986608/
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 Styling Checkboxes
提问by Jeff B
Okay, so I've seen lots of solutions for styling checkboxes via CSS on the web. However, I'm looking for something slightly more robust, and I'm wondering if someone can help. Basically, I want to have this solution, but with the ability to have a CSS-specified color overlaying a gray checkbox. I need this because I will have unpredictable numbers of different checkboxes, each needing a different color, and I don't want to create vast amounts of different images to handle this. Anyone have any ideas on how to achieve this?
好的，所以我在网上看到了很多通过 CSS 设置复选框样式的解决方案。但是，我正在寻找更强大的东西，我想知道是否有人可以提供帮助。基本上，我想要这个解决方案，但能够让 CSS 指定的颜色覆盖灰色复选框。我需要这个，因为我会有不可预测数量的不同复选框，每个复选框都需要不同的颜色，而且我不想创建大量不同的图像来处理这个问题。任何人都对如何实现这一目标有任何想法？
回答by Jeff B
I created a transparent png, where the outside is white, and the checkbox is partially transparent. I modified the code to put a backgroundColor on the element, and voila!, a colorized checkbox.
我创建了一个透明的png，外面是白色的，复选框是部分透明的。我修改了代码以在元素上放置一个 backgroundColor，瞧！，一个彩色复选框。
http://i48.tinypic.com/raz13m.jpg(It says jpg, but it's a png).
http://i48.tinypic.com/raz13m.jpg（它说 jpg，但它是一个 png）。
I would post the example, but I don't know of a good way to show it. Any good sandbox sites out there?
我会发布示例，但我不知道展示它的好方法。有什么好的沙盒网站吗？
This, of course, depends on png support. You could poorly do this with gif, or put a semi-transparent css layer over the image, like you suggested, and then use a gif mask to mask out the bleed of the colored box. This method assumes transparency support.
当然，这取决于 png 支持。你可以用 gif 来做这个，或者像你建议的那样在图像上放置一个半透明的 css 层，然后使用 gif 蒙版来掩盖彩色框的流血。此方法假定支持透明度。
My png method uses the css, js from the page you linked to, with these changes:
我的 png 方法使用您链接到的页面中的 css、js，并进行了以下更改：
JS:
JS：
// Changed all instances of '== "styled"' to '.search(...)'
// to handle the additional classes needed for the colors (see CSS/HTML below)
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {
span[a] = document.createElement("span");
// Added '+ ...' to this line to handle additional classes on the checkbox
span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
CSS:
CSS：
.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0px; /* Removed padding to eliminate color bleeding around image
you could make the image wider on the right to get the padding back */
background: url(checkbox2.png) no-repeat;
display: block;
clear: left;
float: left;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
etc...
HTML:
HTML：
<p><input type="checkbox" name="1" class="styled green"/> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>
Hope that makes sense.
希望这是有道理的。
Edit:
编辑：
Here is a jQuery example that illustrates the principle with checkboxes:
这是一个 jQuery 示例，它说明了复选框的原理：
回答by Banjer
It sounds like you already know this, but the solution you linked to above actually replaces the checkbox with a span tag with an image to give the effect of a "styled" checkbox.
听起来您已经知道这一点，但是您上面链接的解决方案实际上将复选框替换为带有图像的 span 标记，以提供“样式”复选框的效果。
For most browsers like IE and Firefox, there are few (if any) options and very little support for styling checkboxes with CSS alone.
对于大多数浏览器（如 IE 和 Firefox），几乎没有（如果有）选项，并且对单独使用 CSS 的样式复选框的支持也很少。
回答by Johnny4000
Jeff B's answer on how to edit the said solution is correct. Here is the implementation of his edit to the solution if someone needs to copy and paste.
Jeff B 关于如何编辑上述解决方案的回答是正确的。如果有人需要复制和粘贴，这是他对解决方案的编辑的实现。
JavaScript http://pastebin.com/WFdKwdCt
JavaScript http://pastebin.com/WFdKwdCt
回答by Sebastian Vox
I've found http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/a javascript + css solution thats works on win ie, win and mac: chrome, safari, firefox, opera. iOS Safari and chrome.
我找到了http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/一个 javascript + css 解决方案，它适用于 win ie、win 和 mac：chrome、safari、firefox、opera。iOS Safari 和 chrome。
