checkbox实现开关按钮

效果：
关闭时：

打开时：

html部分：

 <div class='search_checkbox'>
        <input type='checkbox' id='switch'>
        <label for='switch'></label>
    </div>

css部分

 .search_checkbox {
            margin: 0;
            padding: 0;
            height: 0.62rem;
            width: 1.02rem;
            display: flex;
            box-sizing: border-box;
        }

        .search_checkbox input[type=checkbox] {
            height: 0px;
            width: 0px;
            visibility: hidden;
        }

        .search_checkbox label {
            height: 0.62rem;
            width: 1.02rem;
            cursor: pointer;
            /* height: 20px; */
            border-radius: 0.5rem;
            display: inline-block;
            background-color: #C6CAD3;
            /* width: 40px; */
            text-indent: -99999px;
            position: relative;
        }

        .search_checkbox label::before {
            content: '';
            display: inline-block;
            background-color: #fff;
            height: 0.56rem;
            width: 0.56rem;
            position: absolute;
            top: 0.02rem;
            left: 0.02rem;
            border-radius: 50%;
            transition: 0.3s;
        }

        .search_checkbox input:checked+label {
            background: #2BA0FF;
        }

        .search_checkbox input:checked+label:before {
            left: calc(100% - 0.02rem);
            transform: translateX(-100%);
        }

        .search_checkbox label:active:before {
            width: 0.4rem;
        }

        @media (min-width: 240px) {
            html {
                font-size: 32px;
            }
        }

        @media (min-width: 320px) {
            html {
                font-size: 42.66667px;
            }
        }

        @media (min-width: 360px) {
            html {
                font-size: 48px;
            }
        }

        @media (min-width: 375px) {
            html {
                font-size: 50px;
            }
        }

        @media (min-width: 384px) {
            html {
                font-size: 51.2px;
            }
        }

        @media (min-width: 411px) {
            html {
                font-size: 54.8px;
            }
        }

        @media (min-width: 414px) {
            html {
                font-size: 55.2px;
            }
        }

        @media (min-width: 424px) {
            html {
                font-size: 56.53333px;
            }
        }

        @media (min-width: 480px) {
            html {
                font-size: 64px;
            }
        }