抄自： http://www.cnblogs.com/xyzhanjiang/p/3989836.html?utm_source=tuicool&utm_medium=referral
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 7 <style> 8 9 .m-green-checkbox:checked + .m-green-label, 10 .m-green-checkbox:not(:checked) + .m-green-label { 11 background-color: #e0e0e0; 12 border-radius: 24px; 13 cursor: pointer; 14 display: inline-block; 15 height: 24px; 16 position: relative; 17 text-indent: -9999px; 18 width: 48px; 19 -webkit-transition: background-color 0.3s; 20 transition: background-color 0.3s; 21 } 22 23 .m-green-checkbox:checked + .m-green-label:after, 24 .m-green-checkbox:not(:checked) + .m-green-label:after { 25 background-color: #fff; 26 border-radius: 20px; 27 content: " "; 28 height: 20px; 29 left: 2px; 30 position: absolute; 31 top: 2px; 32 width: 20px; 33 -webkit-transition: left 0.3s; 34 transition: left 0.3s; 35 } 36 37 .m-green-checkbox:checked + .m-green-label { 38 background-color: #58AF96; 39 } 40 41 .m-green-checkbox:checked + .m-green-label:after { 42 left: 26px; 43 } 44 45 </style> 46 <body> 47 <input id="example" class="m-green-checkbox" type="checkbox" style="display: none"> 48 <label class="m-green-label" for="example">Check</label> 49 </body> 50 </html>