纯CSS实现checkbox

纯css实现的checkbox，效果见我的codepen。

关键在于把原生的input隐藏，用和他相关的label来探测单击事件。

再就是checkbox里的对勾的实现，用右边和下边的边框组合，然后旋转而成。

好吧，来看源码吧。

<div class="container">
    <div class="checkboxouter">
        <input type="checkbox">
        <label class="checkbox"></label>
         
    </div>
</div>

CSS是关键，用了SASS和Prefix free。

/*SASS变量定义*/
 $border-styles: 2px solid lightgrey;
 $tick-color: #27ae60;
 $box-color: #fff;
 
/*实现页面背景、居中对齐，非本案例关键代码*/
 body {
    background-color: $bgcolor;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 40px;
    width: 40px;
    text-align: center;
    transform: translate(-50%, -50%);
}
/*实现复选框外边框*/
 .checkboxouter {
    height: 40px;
    width: 40px;
    border-radius: 3px;
    background-color:$box-color;
    display: block;
    border:$border-styles;
    transition: all .5s;
}
.checkboxouter:hover {
    transform: scale(1.5);
}
/*原生的checkbox隐藏*/
 input[type="checkbox"] {
    opacity: 0;
    background : red;
    position: absolute;
    cursor: pointer;
    z-index: 1;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
/*就是这个东东实现复选框里的对勾*/
 .checkbox {
    position: absolute;
    border-bottom: 3px solid lightgrey;
    border-right: 3px solid lightgrey;
    background-color: transparent;
    height: 20px;
    width: 10px;
    transform: rotate(45deg);
    transform-origin: -35% 30%;
    transition: all 0.2s;
}
/*label来激活单击事件*/
 input[type="checkbox"]:checked ~.checkbox {
    transition: all 0.3s;
    border-bottom:3px solid $tick-color;
    border-right:3px solid $tick-color;
}

给大家推荐个关于CSS的单击事件处理教程，5m3d的采用 CSS 处理点击事。

好吧，今天的这篇有点简单，大家海涵。，请大家到我的codepen在线编辑、下载效果。

---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------