纯CSS实现checkbox

我会带着你远行 2022-08-24 15:24 323阅读 0赞

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

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

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

好吧，来看源码吧。

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 处理点击事][CSS]。

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

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

[codepen]: http://codepen.io/whqet/pen/Kqwex
[CSS]: http://5m3d.com/2013/01/%E9%87%87%E7%94%A8-css-%E5%A4%84%E7%90%86%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6/