input开关按钮 - 爱码网

最终效果：
源代码：
 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>
View Code
ps：同类问题改变checkbox和radio的默认样式