复选框背景css样式,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; /* 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：

(green)

(red)

(purple)

希望这是有道理的。

修改强>

这是一个jQuery示例，说明了复选框的原理：