最终效果：
源代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .switchInput { 6 display: none; 7 } 8 .switchlabel { 9 position: relative; 10 width: 2.8em; 11 height: 1.2em; 12 display: inline-block; 13 border-radius: 20px; 14 background-color: #fff; 15 box-shadow: #ccc 0px 0px 0px 1px; 16 overflow: hidden; 17 } 18 .switchlabel:before { 19 content: ''; 20 position: absolute; 21 left: 0; 22 z-index: 20; 23 width: 1.2em; 24 height: 1.2em; 25 display: inline-block; 26 border-radius: 20px; 27 background-color: #bdbdbd; 28 transition: all 0.5s; 29 } 30 .switchInput:checked + label.switchlabel:before { 31 left: 1.6em; 32 background-color: #70b9f7; 33 } 34 .switchInput:checked + label.switchlabel{ 35 background-color: #fff; 36 box-shadow: #70b9f7 0px 0px 0px 1px; 37 } 38 </style> 39 </head> 40 <body> 41 <input class="vtcalignMiddle switchInput" id="switch" type="checkbox" checked/> 42 <label class="vtcalignMiddle switchlabel marginBottom0" for="switch" data-on="info" data-off="success"></label> 43 </body> 44 </html>
ps：同类问题改变checkbox和radio的默认样式
