label input实现按钮开关切换效果

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