之前在项目中使用滑块开关按钮，纯css写的，不考虑兼容低版本浏览器，先说下原理：
使用 checkbox 的 选中 checked 属性改变css 伪类样式， 一定要使用-webkit-appearance: none; 先清除checkbox的默认样式 ，否则写其他的样式不起作用；
好，不多说，直接上代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css滑块开关</title> ???<style> ???????.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; ???????} ???</style></head><body><input type="checkbox" class="checke"></body></html> 一个干净整洁的按钮代码就产生了！如果需要根据按钮样式，决定某个数据值，就要写在js中判断 checkbox 是否选择就ok了，简单易用！
纯css的滑块开关按钮
原文地址：https://www.cnblogs.com/xinxinxiangrong7/p/9545349.html