使用CSS3编写类似iOS中的复选框及带开关的按钮

checkbox多选

最近写了一个适合移动端的checkbox，如图：

ps：中间的勾勾是iconfont，iOS风格的。

具体的HTML：

1. <div class="mui-checkbox-con">  
2.     <label>  
3.         <input class="mui-checkbox" type="checkbox">默认未选中</label>  
4. </div>  
5. <div class="mui-checkbox-con">  
6.     <label>  
7.         <input class="mui-checkbox" type="checkbox" checked>默认选中</label>  
8. </div>  
9. <div class="mui-checkbox-con">  
10.     <label>  
11.         <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>  
12. </div>  
13. <div class="mui-checkbox-con">  
14.     <label>  
15.         <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>  
16. </div>  
17. <div class="mui-checkbox-con">  
18.     <label>  
19.         <input class="mui-checkbox" type="checkbox" disabled>禁用</label>  
20. </div>  

CSS代码（SCSS导出的，排版有些奇怪）：

1. .mui-checkbox {   
2.   -webkit-appearance: none;   
3.   position: relative;   
4.   width: 25px;   
5.   height: 25px;   
6.   margin-right: 10px;   
7.   background-color: #FFFFFF;   
8.   bo