之前在项目中使用滑块开关按钮，纯css写的，不考虑兼容低版本浏览器，先说下原理：
使用checkbox 的 选中checked 属性改变css 伪类样式， 一定要使用-webkit-appearance: none; 先清除checkbox的默认样式 ，否则写其他的样式不起作用；
好，不多说，直接上代码：
css滑块开关
.checke{
position: relative;
-webkit-appearance: none;
width:90px;
height: 44px;
line-height: 44px;
background: #eee;
border-radius: 30px;
outline: none;
}
.checke:before{
position: absolute;
left: 0;
content: '';
width: 44px;
height: 44px;
border-radius: 50%;
background: #eee;
box-shadow: 0px 0px 5px #ddd;
transition: all 0.2s linear;
}
.checke:checked{
background: #18ff0a;
}
.checke:checked:before{
left: 45px;
transition: all 0.2s linear;
}
一个干净整洁的按钮代码就产生了！如果需要根据按钮样式，决定某个数据值，就要写在js中判断checkbox 是否选择就ok了，简单易用！
