纯CSS实现checkbox

当前位置 : 首页 > 网页制作 > CSS > 纯CSS实现checkbox

纯CSS实现checkbox

来源: 作者: 时间:2016-01-25 10:02
纯css实现的checkbox,效果见我的codepen。关键在于把原生的input隐藏,用和他相关的label来探测单击事件。再就是checkbox里的对勾的实现,用右边和下边的边框组合,然后旋转而成。好吧,

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

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

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

Tag:
上一篇:常用的CSS
下一篇:CSS 动态进度条效果
网友评论

<