switch开关

1.开关按钮 效果如下图

2.css代码

   .form-switch{
       display: inline-block;
   }
     .form-switch input[type="checkbox"]{ display: none; }
             
             
             .form-switch >div{
                 position: relative;
                display: inline-block;
                padding: 0 5px;
                width: auto!important;
                min-width: 35px;
                height: 22px;
                line-height: 22px;
                background-color: #fff;
                box-shadow: #ccc 0px 0px 0px 2px;
                border-radius: 20px;
                overflow: hidden;
             }
             
             .form-switch div>span{
                 color: #999;
             }
  
    .form-switch i{
        position: absolute; 
        left: 5px;
        top: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #d2d2d2;
        -webkit-transition: .1s linear;
         transition: .1s linear;
    }
    
    .form-switch div >em{
        position: relative;
        top: 0;
        width: 25px;
        margin-left: 21px;
        padding: 0!important;
        text-align: center!important;
        color: #999!important;
        font-style: normal!important;
        font-size: 12px;
    }
     .form-switch div >em:last-child{
         display: block;
     }
     .form-switch input[type="checkbox"]:checked + div {
     border-color: #3679b7;
    background-color: #3679b7;
    color: #fff;
 }
 .form-switch input[type="checkbox"]:checked + div i{
    left: 100%;
    margin-left: -21px;
    background-color: #fff;
}
 .form-switch input[type="checkbox"]:checked + div em:last-child{
    display: block;
    color: #fff;
    margin-left: 5px;
    margin-right: 21px;
    color: #fff!important;
}
.form-switch input[type="checkbox"]:checked + div em:nth-child(2){
    display: none;
    color: #fff;
}

3.html结构

1  <label class="form-switch">
2           <input type="checkbox" id="toggle-button" name="switch" checked="">
3           <div>
4             <i></i>
5             <em>OFF</em>
6             <em>ON</em> 
8           </div>
9    </label>