HTML
导入代码模板:
Checkbox样式body {
color: #444;
font-size: 1.6em;
background: #ccc;
}
.container {
width: 90%;
margin: 20px 3%;
padding: 25px;
min-height: 400px;
height: auto;
background: #FFF;
}
section {
float: left;
width: 30%;
margin: 20px 20px;
}
hr {
clear: both;
}
/**
* Start by hiding the checkboxes
*/
input[type=checkbox] {
visibility: hidden;
}
/**
* Create the slider bar
*/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}
/**
* Create the slider from the label
*/
.checkboxOne label {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}
/**
* Mov