好的，我在网上看到了很多通过 CSS 设置复选框样式的解决方案。但是，我正在寻找更强大的东西，我想知道是否有人可以提供帮助。基本上，我想要this solution，但能够让 CSS 指定的颜色覆盖灰色复选框。我需要这个，因为我将拥有不可预测数量的不同复选框，每个复选框都需要不同的颜色，而且我不想创建大量不同的图像来处理这个问题。有人对如何实现这一目标有任何想法吗？
【问题讨论】：
我创建了一个透明的 png，外面是白色的，复选框是部分透明的。我修改了代码，在元素上添加了一个 backgroundColor，瞧！，一个彩色的复选框。
http://i48.tinypic.com/raz13m.jpg（上面写着 jpg，但它是 png）。
我会发布示例，但我不知道展示它的好方法。有什么好的沙盒网站吗？
当然，这取决于对 png 的支持。你可以用 gif 来做这件事，或者像你建议的那样在图像上放置一个半透明的 css 层，然后使用 gif 蒙版来掩盖彩色框的出血。此方法假定支持透明度。
我的 png 方法使用了您链接到的页面中的 css、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：
.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：
<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>
希望这是有道理的。
编辑：
这是一个 jQuery 示例，用复选框说明原理：
【讨论】：
听起来您已经知道这一点，但您在上面链接的解决方案实际上将复选框替换为带有图像的 span 标签，以提供“样式化”复选框的效果。
对于大多数浏览器，如 IE 和 Firefox，只有很少的（如果有的话）选项，并且很少支持单独使用 CSS 设置复选框样式。
【讨论】：
Jeff B 关于如何编辑上述解决方案的回答是正确的。如果有人需要复制和粘贴，这是他对解决方案的编辑的实现。
JavaScripthttp://pastebin.com/WFdKwdCt
【讨论】：
我找到了http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 一个 javascript + css 解决方案，适用于 win ie、win 和 mac：chrome、safari、firefox、opera。 iOS Safari 和 chrome。
【讨论】：