css手写开关按钮

@charset "utf-8";
#checkbox{
    display:none;
}
.switch{
    width:80px;
    height:20px;
    border:1px solid #666;
    border-radius: 10px;
    background:#333;
    position:relative;
    label{
        width:30px;
        height:20px;
        border-radius: 10px;
        background:#fff;
        position:absolute;
        top:0;
        left:0;
        transition: all 1s linear 0s;
    }
    
    label::before{
        content:"OFF";
        color:#fff;
        position:absolute;
        top:-2px;
        left:42px;
        transition: all 1s linear 0s;
    }
   
}
#checkbox:checked + .switch label{
    left:50px;
}

#checkbox:checked + .switch label::before{
    left:-30px;
    content:'ON';
}

#checkbox:checked + .switch{
    background:green;
}

结果：