一个适合移动端的checkbox

一个适合移动端的checkbox，如图：

具体的HTML：

<div class="mui-checkbox-con">
<label>
<input class="mui-checkbox" type="checkbox">默认未选中</label>
</div>
<div class="mui-checkbox-con">
<label>
<input class="mui-checkbox" type="checkbox" checked>默认选中</label>
</div>
<div class="mui-checkbox-con">
<label>
<input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
</div>
<div class="mui-checkbox-con">
<label>
<input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
</div>
<div class="mui-checkbox-con">
<label>
<input class="mui-checkbox" type="checkbox" disabled>禁用</label>
</div>

CSS代码：

.mui-checkbox {
-webkit-appearance: none;
position: relative;
width: 25px;
height: 25px;
margin-right: 10px;
background-color: #FFFFFF;
border: solid 1px #d9d9d9;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-clip: padding-box;
display: inline-block; }
.mui-checkbox:focus {
outline: 0 none;
outline-offset: -2px; }
.mui-checkbox:checked {
background-color: #18b4ed;
border: solid 1px #FFFFFF; }
.mui-checkbox:checked:before {
display: inline-block;
margin-top: 1px;
margin-left: 2px;
font-family: iconfont;
content: "\e667";
color: #FFFFFF;
font-size: 18px; }
.mui-checkbox:disabled {
background-color: #d9d9d9;
border: solid 1px #d9d9d9; }
.mui-checkbox:disabled:before {
display: inline-block;
margin-top: 1px;
margin-left: 2px;
font-family: iconfont;
content: "\e667";
color: #FFFFFF;
font-size: 18px; }
.mui-checkbox.checkbox-green:checked {
background-color: #5cb85c; }
.mui-checkbox.checkbox-orange:checked {
background-color: #f0ad4e; }
.mui-checkbox.checkbox-s {
width: 19px;
height: 19px; }
.mui-checkbox.checkbox-s:before {
display: inline-block;
margin-top: 1px;
margin-left: 2px;
font-family: iconfont;
content: "\e667";
color: #FFFFFF;
font-size: 13px; }
.mui-checkbox-anim {
-webkit-transition: background-color ease 0.2s;
transition: background-color ease 0.2s; }