抄自： http://www.cnblogs.com/xyzhanjiang/p/3989836.html?utm_source=tuicool&utm_medium=referral
<!DOCTYPE html>
<html>
<head>
<title></title>
</head> <style> .m-green-checkbox:checked + .m-green-label,
.m-green-checkbox:not(:checked) + .m-green-label {
background-color: #e0e0e0;
border-radius: 24px;
cursor: pointer;
display: inline-block;
height: 24px;
position: relative;
text-indent: -9999px;
width: 48px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
} .m-green-checkbox:checked + .m-green-label:after,
.m-green-checkbox:not(:checked) + .m-green-label:after {
background-color: #fff;
border-radius: 20px;
content: " ";
height: 20px;
left: 2px;
position: absolute;
top: 2px;
width: 20px;
-webkit-transition: left 0.3s;
transition: left 0.3s;
} .m-green-checkbox:checked + .m-green-label {
background-color: #58AF96;
} .m-green-checkbox:checked + .m-green-label:after {
left: 26px;
} </style>
<body>
<input id="example" class="m-green-checkbox" type="checkbox" style="display: none">
<label class="m-green-label" for="example">Check</label>
</body>
</html>