和前面一样，我们来添加滑块的样式，当被点击时它会移动到另一侧，并且改变颜色。
CSS Code复制内容到剪贴板
/**
* Create the pill to click
*/
.checkboxThree label {
display: block;
width: 52px;
height: 22px;
border-radius: 50px;
-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;
}
/**
* Create the checkbox event for the label
*/
.checkboxThree input[type=checkbox]:checked + label {
left: 60px;
background: #26ca28;
}
样式四
在这个样式中，我们会创建两个圆形，当点击时改变里面的圆形的颜色表示选中与未选中的状态。
和前面一样的HTML代码。
XML/HTML Code复制内容到剪贴板
<section>
<!– Checbox Four –>
<h3>Checkbox Four</h3>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>
接下来我们要为checkbox创建外面的圆形，使用CSS的border-radius属性，并且设置为100%就可以创建一个正圆形。
CSS Code复制内容到剪贴板
<section>
<!– Checbox Four –>
<h3>Checkbox Four</h3>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
