CSS样式复选框

我创建了一个透明的png，外部是白色，复选框是部分透明的。我修改了代码，将backgroundColor放在元素上，瞧！，一个彩色复选框。

我会发布该示例，但是我不知道显示它的好方法。有没有好的沙盒网站？

当然，这取决于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;     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" /> (green)</p><p><input type="checkbox" name="2"  /> (red)</p><p><input type="checkbox" name="3"  /> (purple)</p>

希望有道理。