html 滑块按钮,纯css的滑块开关按钮

之前在项目中使用滑块开关按钮，纯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了，简单易用！