html5复选框样式,CSS3 5款自定义复选框（Checkbox）样式

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