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>