转载

一个适合移动端的checkbox

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

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

一个适合移动端的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代码（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

测试地址二维码扫：

一个适合移动端的checkbox