一个适合移动端的checkbox

一个适合移动端的checkbox

时间 2015-06-10 11:16:32 WEB前端开发

原文  http://www./archives/5677

主题 Html

最近写了一个适合移动端的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./b-mui/checkbox.html

测试地址二维码扫：