checkbook实现任何颜色背景

有些时候须要用到checkbook的其余颜色背景，若是用原生的checkbook会以为比较没有视觉美感，因此分享一种实现checkbox里面增长任何背景任何图片的点击。 先贴上html：

<input type="checkbox" class="agree-confirm agree-content" checked="true" id="agree-check">
复制代码

跟上css：

.agree-confirm{width: 13px;height: 13px;-webkit-appearance: none; background-color: inherit; border:1px solid #18b4ed; border-radius: 3px;}
.agree-confirm:checked:before {
    display: inline-block;
    content:url('../images/login/checkicon-small.png');
    line-height: 14px;
    top:-2px;
    right: 2px;
    color: white;
    position: absolute;
    width: 25px;
}
.agree-confirm:checked{background-color: #18b4ed; border: none;}
.agree-content{position: absolute; top: 14px;right: 133px; transition: background-color ease 0.2s;}
.next-step .login-next{height: 44px; border-radius: 7px;}
复制代码

从中能够看出，关键的代码是：-webkit-appearance: none;，这句代码对于移动端绝大部分的浏览器，Android，iOS的移动端浏览器都以webkit为内核 兼容，这句代码主要做用就是取消了当前元素的默认样式，咱们要实现checkbook的选中状态为其余背景色：因此就跟上了代码： .agree-confirm:checked{background-color: #18b4ed; border: none;}

而要保证被选中以前背景色为透明，则就是用css：background-color: inherit; 跟随父级颜色便可。 最后看伪类元素： 经过定位，咱们能够实现对伪类元素进行背景图片设置，而后就能够实现被选中状态图片显示，仅仅经过css就能够实现交互。

//当咱们引进css的时候须要增长版本号，这样就能够避免服务器缓存带来的静态资源没更新的问题。