这个DIV会变成比样式一大一些的条带，label依然是作为滑块，使用下面的CSS来定义它。
CSS Code复制内容到剪贴板
/**
* Checkbox Two
*/
.checkboxTwo {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
这个样式中间有一个黑色的条，滑块会沿着它左右滑动，但是DIV元素已经使用了，所以我们需要用:before伪类创建一个新的元素。
CSS Code复制内容到剪贴板
/**
* Create the line for the circle to move across
*/
.checkboxTwo:before {
content: ”;
position: absolute;
top: 19px;
left: 14px;
height: 2px;
width: 90px;
background: #111;
}
和样式一一样，接下来我们为label写CSS样式，把它用作滑块。
CSS Code复制内容到剪贴板
/**
* Create the circle to click
*/
.checkboxTwo label {
display: block;
width: 22px;
height: 22px;
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: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}
我要实现和样式一差不多的选中状态，当选中时改变label的left和background属性。
CSS Code复制内容到剪贴板
/**
* Create the click event for the checkbox
*/
.checkboxTwo input[type=checkbox]:checked + label {
left: 84px;
background: #26ca28;
}
样式三
