简介
网页UI自定义组件第四讲 自定义表单开关按钮。网页上常见的种种UI效果我们经常感觉太漂亮了。接下来的几天我们会一直来使用CSS3来制作一些常见的UI效果，来改变浏览器默认UI效果。请大家持续关注。今天我们要分享的是关于浏览器的表单元素中最让人头疼的自定义表单开关按钮。同样的会贴上视频。
常见的网页UI效果
1481533413787524.png
1481533387423174.png
案例效果
1481533424450026.png
技巧说明
使用CSS3伪类：checked :before 来进行制作，同样的要取消掉浏览器的默认效果，使用-webkit-appearance: none来去掉，以及及box-shadow属性及transition过渡和transform转换。详细效果请参见视频：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
}
div{
width: 60px;
margin: 100px auto;
}
input[type="checkbox"]{
-webkit-appearance: none;
width: 60px;
height: 28px;
background: #efefef;
border-radius: 28px;
box-shadow: 0px 2px 2px rgba(0,0,0,.3) inset;
outline: none;
transition: all 0.3s;
}
input[type="checkbox"]:checked{
background: rgba(146, 214, 255, 0.91);
}
input[type="checkbox"]:before{
width: 24px;
height: 24px;
background: #999;
content: " ";
display: block;
border-radius: 100%;
position: relative;
left: 2px;
top: 2px;
transform: translateX(32px);
transition: all 0.3s;
}
input[type="checkbox"]:checked:before{
background: #1E90FF;
transform: translateX(0px);
}
</style>
</head>
<body>
<div>
<input type="checkbox" />
</div><div>
<input type="checkbox" />
</div><div>
<input type="checkbox" />
</div>
</body>
</html>
