CSS样式checkbox
好的，所以我通过networking上的CSS看到了许多样式checkbox的解决scheme。 不过，我正在寻找一些更强大的东西，我想知道是否有人可以帮助。 基本上，我想要有这个解决scheme ，但有一个CSS指定的颜色覆盖灰色checkbox的能力。 我需要这个，因为我将有不可预知数量的不同的checkbox，每个checkbox需要不同的颜色，我不想创build大量不同的图像来处理这个。 任何人有任何想法如何实现这一目标？
我创build了一个透明的PNG，外面是白色的，checkbox是部分透明的。 我修改了代码以在元素上放置一个backgroundColor，瞧！一个彩色checkbox。
160wpb4.jpg （它说，JPG，但它是一个PNG）。
我会张贴的例子，但我不知道一个好的方式来显示它。 任何好的沙箱网站？
这当然取决于png的支持。 你可能很难做到这一点的gif，或者像你所build议的那样在图像上放置一个半透明的css图层，然后使用一个gif掩码来掩盖彩色框的stream血。 此方法采用透明度支持。
我的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示例，用于说明使用checkbox的原则：
这听起来像你已经知道这一点，但你上面链接的解决scheme实际上用checkboxreplacecheckbox与图像给一个“风格”checkbox的效果。
对于像IE和Firefox这样的大多数浏览器，只有很less（如果有的话）选项，并且仅仅使用CSS来支持样式checkbox。
杰夫B的如何编辑上述解决scheme的答案是正确的。 如果有人需要复制和粘贴，这里是他编辑解决scheme的实现。
JavaScript http://pastebin.com/WFdKwdCt
我发现http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/一个JavaScript + CSS的解决scheme，这就是胜利即胜利和MAC：铬，Safari浏览器，火狐，歌剧。 iOS Safari和Chrome。
