CSS样式复选框

小编典典

CSS样式复选框

css

好的，因此我在网络上看到了许多用于通过CSS设置复选框样式的解决方案。但是，我正在寻找更强大的功能，而且我想知道是否有人可以提供帮助。基本上，我想拥有这个解决方案，但是能够将CSS特定颜色覆盖在灰色复选框上。我需要这样做是因为我会有许多不同的复选框，每个复选框需要不同的颜色，而且我不想创建大量不同的图像来处理此问题。有人对如何实现这一目标有任何想法吗？

阅读 1930

2020-05-16

共1个答案

小编典典

我创建了一个透明的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：

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

希望有道理。

2020-05-16