CSS/HTML实现Switch开关按钮

原文链接：https://blog.csdn.net/yang031997/article/details/102944791

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Switch开关样式 */
        input[type='checkbox'].switch {
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            position: relative;
            width: 40px;
            height: 20px;
            background: #ccc;
            border-radius: 10px;
            transition: border-color .3s, background-color .3s;
        }

        input[type='checkbox'].switch::after {
            content: '';
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0, 0, 2px, #999;
            transition: .4s;
            top: 2px;
            position: absolute;
            left: 2px;
        }

        input[type='checkbox'].switch:checked {
            background: rgb(19, 206, 102);
        }

        /* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */
        input[type='checkbox'].switch:checked::after {
            content: '';
            position: absolute;
            left: 55%;
            top: 2px;
        }
    </style>
</head>

<body>
    <input type="checkbox" class="switch">
</body>

</html>

 

posted @ 2020-07-28 16:18  最好的年纪  阅读(10640)  评论(0)  编辑  收藏  举报