一个适合移动端的checkbox

最近写了一个适合移动端的checkbox,如图:

67755CB5-1D7B-4A75-839E-317FE04280EC

ps:中间的勾勾是iconfont,iOS风格的。

具体的HTML:

 
 
 
 
 

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.iicen.cn/d/checkbox.html

测试地址二维码扫: