纯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;

            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的滑块开关按钮

最新文章

热门文章