CSS样式复选框

前端之家收集整理的这篇文章主要介绍了CSS样式复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,所以我已经看到很多解决方案,通过网络CSS上的样式复选框。但是,我正在寻找一些稍微更强大的东西,我想知道有人能帮助吗?基本上,我想要有 this solution,但是可以使用CSS指定的颜色覆盖灰色复选框。我需要这个,因为我会有不可预测的数量不同的复选框,每个都需要不同的颜色,我不想创建大量的不同的图像来处理这个。任何人都有什么想法如何实现这一点?

解决方法

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

原文链接:https://www.f2er.com/css/219244.html

猜你在找的CSS相关文章