Label inputボタンスイッチ切替効果を実現

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    
    


    
 label input left , ，  input .box .switch-btn left 0px( -37px);
    

        .ipt:checked   .box .switch-btn {
            left: 0;
        }
    
もちろんtransitionに わせて します
 は 
class="wrap">
class="ipt"type="checkbox"name=""value="">
class="box">
class="switch-btn">
class="on">ON
class="white">
class="off">OFF
すべてcssコード

            .ipt {
                display: none;
            }
            .box {
                width: 74px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                border: 1px solid #eee;
                border-radius: 4px;
                position: relative;
                cursor: pointer;
            }
            .ipt:checked   .box .switch-btn {
                left: 0;
            }
            .switch-btn {
                position: absolute;
                left: -37px;
                top: 0;
                width: 111px;
                height: 30px;
                transition: all 0.5s;
            }
            .switch-btn span{
                width: 37px;
                height: 30px;
                display: block;
                text-align: center;            
                float: left;
                font-size: 14px;
            }
            .on {
                background: #52B13C;
                color: white;
            }
            .white {
                background: white;
            }
            .off {
                background: #EEEEEE;
            }