您的位置：首页 > Web前端 > CSS

使用CSS3制作酷炫防苹果复选框自行测试！

2015-10-22 09:01 696 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background:#eee;
}
.lbl{
/*复选框背景色*/
height:20px;
width:50px;
display:block;/*元素将显示为块级元素*/
background:#ddd;
border-radius:20px;/*为元素添加圆角边框*/
cursor:pointer;/*鼠标样式*/
position:relative;/*相对定位*/
transition:all 0.3s ease;/*平滑过渡效果*/
}
.cbx:checked ~ label{
/*设置选中的复选框的兄弟元素label的背景色*/
background:#42d842;
}
.lbl:after{
/*在元素的内容后面插入内容*/
content:'';
width:25px;
height:25px;
display:block;
background:#fff;
border-radius:25px;/*为元素添加圆角边框*/
box-shadow:0px 3px 3px rgba(0,0,0,0.05);/*为元素设置阴影*/
transition:all 0.3s ease;/*平滑过渡效果*/
position:absolute;
/*绝对定位，父容器使用相对定位，子元素使用绝对定位后，
这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角*/
/*调整元素位置*/
left:-2px;
top:-3px;
}
.cbx:checked ~ label:after{
/*改变选中状态的复选框的兄弟元素label的圈圈位置*/
left:25px;
background:#fff;
}
.lbl:active:after{
/*设置点击时候圈圈进行缩放动画*/
transform:scale(2,0.8);
}
.hidden{
/*隐藏复选框*/
display:none;
}
.cbx:disabled ~ label{
/*设置复选框禁用時候的兄弟元素label樣式*/
background:#d5d5d5;
pointer-events:none;/*阻止点击动作产生效果*/
}
.cbx:disabled ~ label:after{
/*设置复选框禁用時候的兄弟元素label圈圈樣式*/
background:#bcbdbc;
}
.check{
/*设置元素的下边距*/
margin-bottom:20px;
}
.content{
width:100px;
margin:100px auto;/*设置居中*/
}
</style>
</head>
<body>
<div class="content">
<div class="check">
<input type="checkbox" id="uncheckbox" class="cbx hidden" name="1" />
<label for="uncheckbox" class="lbl"></label>
<!--for 属性规定 label 与哪个表单元素绑定。-->
</div>
<!--再来一个禁用的复选框-->
<div class="check">
<input type="checkbox" id="discheckbox" class="cbx hidden" name="sb" disabled/>
<label for="discheckbox" class="lbl"></label>
</div>
<!--再来一个选中状态的复选框-->
<div class="check">
<input type="checkbox" id="checkbox" class="cbx hidden" name="1" checked/>
<label for="checkbox" class="lbl"></label>
</div>
</div>

</body>
</html>

chrome浏览器效果图！主流浏览器一切正常。除了ie8 以下不兼容。万恶的IE之源赶紧从中国消失吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

使用CSS3制作酷炫防苹果复选框 自行测试！

使用CSS3制作酷炫防苹果复选框自行测试！