纯css的滑块开关按钮

之前在项目中使用滑块开关按钮，纯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;
            90px;
            height: 44px;
            line-height: 44px;
            background: #eee;
            border-radius: 30px;
            outline: none;
        }
        .checke:before{
            position: absolute;
            left: 0;
            content: '';
             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了，简单易用！