用css3实现自定义效果复选框--不用js

用css3实现自定义效果复选框–不用js

现在UE的要求是越来越多，浏览器原生的复选框checkbox他们就是做噩梦也不会接受的。那只能发挥我们前端工程师的聪明才智了。
想当年，为了兼容ie，要切个背景图，还要写点js，难是不难，但是也挺麻烦的。如今在手机端用css3实现一个就方便多了。
废话不说，干活。。。

HTML标签结构

<div class="checkbox">
    <input type="checkbox">
    <i></i>
<div>

基本思路

• 最外层div做checkbox的边框
• input标签设为透明，可以让用户点击到
• i 实现选择中状态

下面做一个简单的，外观不咋地，重点是揭示其中的思路。掌握原理之后大家可以根据射鸡湿的要求随意发挥。

设置边框外观

给复选框设置2px宽的边框，圆角2px
设置高度和宽度未24px

.checkbox{
    border: solid 2px #999;
    border-radius: 2px;
    height: 24px;
    width: 24px;
}

原生复选框的设置

设置宽和高都为24px

.checkbox input[type=checkbox]{
    height: 24px;
    width: 24px;
}

i 标签的设置

设置宽度和高度都为24px
背景色#60b044
复选框选中时候为实心的绿色
默认不选择，所以display设未none

.checkbox i{
    background: #60b044;
    display: none;
    height: 24px;
    width: 24px;
}

定位

input和i标签都绝对定位
input显示在i标签的上面
input的透明度设为0，让用户看不到

.checkbox{
    overflow: hidden;
    position: relative;
}
/*input的z-index设得高一点，让他现实在i标签上面*/
.checkbox input[type=checkbox]{
    opacity: 0;
    position: absolute;
    z-index: 10;
}
.checkbox i{
    left: 0;
    position: absolute;
    top: 0;
}

让input和i发生关系，让他们联动

这一步是最关键的，让input和i发生点关系，当input选中的时候i标签显示。
主要是运用了css的伪类:checked和兄弟元素选择器。
具体参考：
[http://www.w3school.com.cn/cssref/selector_checked.asp]
[http://www.w3school.com.cn/cssref/selector_checked.asp]

.checkbox input[type=checkbox]:checked+i {
    display: block;
}

大功告成。

完整代码：[猛戳这里]

在线预览：[猛戳这里]

前端技术交流QQ群： 73895824