SCheckbox_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)

希望有道理。

2020-05-16