一个适合移动端的checkbox – WEB前端开发

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

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

具体的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代码（SCSS导出的，排版有些奇怪）：

				.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; }
			

SCSS代码：

				@mixin checkedCon($fs:18px) {
				&:before {
				display: inline-block;
				margin-top: 1px;
				margin-left: 2px;
				font-family: iconfont;
				content: "\e667";
				color: #FFFFFF;
				font-size: $fs;
				}
				}
				$duration: .4s;
				.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;
				&:focus {
				outline: 0 none;
				outline-offset: -2px
				}
				&:checked {
				background-color: #18b4ed;
				border: solid 1px #FFFFFF;
				@include checkedCon();
				}
				&:disabled {
				background-color: #d9d9d9;
				border: solid 1px #d9d9d9;
				@include checkedCon();
				}
				&.checkbox-green:checked {
				background-color: #5cb85c;
				}
				&.checkbox-orange:checked {
				background-color: #f0ad4e;
				}
				&.checkbox-s {
				width: 19px;
				height: 19px;
				@include checkedCon(13px);
				}
				}
				.mui-checkbox-anim{
				//border等其他元素不做过渡效果，增加视觉差，更有动画效果
				transition: background-color ease $duration/2;
				}
			

写完之后看了下，别人的开源的UI框架基本上都是一个隐藏的 input 元素和一个附加的元素及伪类（ :before 或 :after ）实现的要么干脆图片背景,我自己直接修改了 input 及伪类（ :before ）实现，然后我不踏实，怀疑自己有兼容性问题，因为测试机器有限，所以跪求各位帮忙测试一下，发现问题欢迎微博上 @愚人码头 ，带上截图，机型，浏览器版本等，感激不尽！

测试地址： http://www.css88.com/b-mui/checkbox.html

测试地址二维码扫：