Question

好的，所以我在网上通过CSS看到了很多关于样式复选框的解决方案。但是，我正在寻找一些更强大的东西，我想知道是否有人可以提供帮助。基本上，我想拥有this solution，但能够使用CSS指定的颜色覆盖灰色复选框。我需要这个，因为我会有不可预测数量的不同复选框，每个复选框都需要不同的颜色，我不想创建大量不同的图像来处理这个问题。任何人对如何实现这一点都有任何想法？

Answer 1

我创建了一个透明的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示例，说明了复选框的原理：

http://jsfiddle.net/jtbowden/xP2Ns/

Answer 2

听起来你已经知道了这一点，但你上面链接的解决方案实际上用带有图像的span标签替换了复选框，以提供“样式化”复选框的效果。

对于大多数浏览器，例如IE和Firefox，几乎没有（如果有的话）选项，并且很少支持仅使用CSS的样式复选框。

Answer 3

Jeff B关于如何编辑所述解决方案的答案是正确的。如果有人需要复制和粘贴，这是他对解决方案的编辑的实现。

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

Answer 4

我找到了http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 一个javascript + css解决方案，它可以在win上运行，即win和mac：chrome，safari，firefox，opera。 iOS Safari和Chrome。

CSS样式复选框

4 个答案: