快捷导航
蚂蚁部落 网站首页 实例代码 CSS3实例 查看内容

CSS3美化复选框打勾效果代码实例

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

分享一段代码实例,它利用CSS3实现了美化checkbox打勾效果。

默认情况下,复选框选中打勾并不够美观。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.checkbox{
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.checkbox > input {
  display: none;
}
.input-helper{				
  width: 20px;
  height: 20px;
  margin-right: 5px;
  padding: 5px 0;
}
.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);
  -ms-transform:rotate(-50deg); 	/* IE 9 */
  -moz-transform:rotate(-50deg); 	/* Firefox */
  -webkit-transform:rotate(-50deg); /* Safari 和 Chrome */	
  opacity: 1;
  filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div class="box">
  <label class="checkbox checkbox-inline">
    <input type="checkbox" value="option1">
    <i class="input-helper"></i>
    checkbox
  </label>
  <label class="checkbox checkbox-inline">
    <input type="checkbox" value="option1">
    <i class="input-helper"></i>
    checkbox
  </label>
</div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

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

GMT+8, 2017-8-19 05:56 , Processed in 0.075965 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部