好的，所以我已经看到很多解决方案，通过网络CSS上的样式复选框。但是，我正在寻找一些稍微更强大的东西，我想知道有人能帮助吗？基本上，我想要有
this solution，但是可以使用CSS指定的颜色覆盖灰色复选框。我需要这个，因为我会有不可预测的数量不同的复选框，每个都需要不同的颜色，我不想创建大量的不同的图像来处理这个。任何人都有什么想法如何实现这一点？
解决方法
我创建了一个透明的png，外面是白色的，复选框是部分透明的。我修改了代码，将一个backgroundColor放在元素上，瞧瞧，一个彩色复选框。
http://i48.tinypic.com/raz13m.jpg(它说jpg，但它是一个png)。
我会举个例子，但我不知道一个很好的方式来展示它。有什么好的沙箱网站吗？
这当然取决于png的支持。你可能很难用gif这样做，或者像图像一样在图像上放置一个半透明的css图层，然后使用gif掩模来屏蔽彩色框的出血。此方法假定透明度支持。
我的png方法使用您链接的页面中的css，js，并进行了以下更改：
JS：
@H_301_16@// 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：
@H_301_16@.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：
@H_301_16@<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示例，说明了复选框的原理：
