传智博客
快捷导航
蚂蚁部落 网站首页 前端教程 特效教程 查看内容

栏目导航

≡CSS特效≡

≡JavaScript特效≡

≡jQuery特效≡

CSS3复选框打勾美化效果

2017-5-13 19:28| 发布者: antzone| 查看: 5368| 评论: 0|来自: 蚂蚁部落

传智播客

默认情况下,复选框选中打勾并不够美观,所以在美观度要求较高的网站都需要进行美化。

下面分享一个利用CSS3实现的美化效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.checkbox{
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.checkbox > input {
  display: none;
}
.input-helper{              
  width: 20px;
  height: 20px;
  margin-right: 5px;
  padding: 5px 0;
    position:relative;
}
.input-helper:after{
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border:1px solid #B9B9B9;
  opacity: 1;                
}
.input-helper:before{
  position: absolute;
  content: "";
  width: 25px;
  height: 9px;
  border-left:2px solid #009A61;
  border-bottom: 2px solid #009A61;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: .3s ease;
}
.checkbox > input:checked + .input-helper:after{
  opacity: 0;    
}
.checkbox > input:checked + .input-helper:before{
  transform: rotate(-50deg);
  opacity: 1;
}
</style>
</head>
<body>
<div class="box">
  <label class="checkbox checkbox-inline">
    <input type="checkbox" value="option1">
    <i class="input-helper"></i>
    蚂蚁部落一
  </label>
  <label class="checkbox checkbox-inline">
    <input type="checkbox" value="option1">
    <i class="input-helper"></i>
    蚂蚁部落二
  </label>
</div>
</body>
</html>

上面代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

[CSS] 纯文本查看 复制代码
.checkbox{
  display: flex;
  align-items: center;
  cursor: pointer;
}

将其应用弹性盒模型,内部的项目是垂直居中的。

[CSS] 纯文本查看 复制代码
.checkbox > input {
  display: none;
}

将复选框隐藏起来。

[CSS] 纯文本查看 复制代码
.input-helper{              
  width: 20px;
  height: 20px;
  margin-right: 5px;
  padding: 5px 0;
  position:relative;
}

设置<i>的一些相关样式,比较简单。

并且将其设置为相对定位,那么它的定位子元素就以它为位移参考对象。

[CSS] 纯文本查看 复制代码
.input-helper:after{
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border:1px solid #B9B9B9;
  opacity: 1;                
}

利用伪元素选择器,<i>底部添加一个长宽分别为20px并且带有边框的伪元素。

这个就是我们所看到的类似于复选框的矩形框。

[CSS] 纯文本查看 复制代码
.input-helper:before{
  position: absolute;
  content: "";
  width: 25px;
  height: 9px;
  border-left:2px solid #009A61;
  border-bottom: 2px solid #009A61;
  opacity: 0;
  transition: .3s ease;
}

再通过一个位移选择器,添加一个只有左边框和下边框的元素,这个就是对勾。

当然需要旋转一定角度才能呈现对勾的姿势;它被矩形框所覆盖。

默认是完全透明的。

最后设置它的所有属性改变都以动画的方式进行。

[CSS] 纯文本查看 复制代码
.checkbox > input:checked + .input-helper:after{
  opacity: 0;    
}

虽然复选框被隐藏,但是它被包含在label中,所以点击label也能实现复选框的选中和取消选中效果。

当复选框被选中,那么就隐藏通过:after伪元素选择器添加的伪元素,也就是隐藏矩形框。

[CSS] 纯文本查看 复制代码
.checkbox > input:checked + .input-helper:before{
  transform: rotate(-50deg);
  opacity: 1;
}

和上面原理是一样的,它会使元素旋转-50度,这样就呈现对勾模样。

并且将其设置为不透明,否则我们也无法看到对勾。

二.相关阅读:

(1).display: flex参阅display:flex弹性布局一章节。

(2).>参阅CSS (E>F)子选择符一章节。

(3).:after参阅CSS E::after 伪对象选择器一章节。

(4).transition参阅CSS3 transition一章节。

(5).+参阅CSS (E+F)相邻选择符一章节。

(6).transform参阅CSS3 transform一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-12-11 19:16 , Processed in 0.070488 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部