纯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前端开发技术,分享网页相关资源。
---------------------------------------------------------------