一个适合移动端的checkbox

10年服务1亿前端开发工程师

最近写了一个适合移动端的checkbox,如图:
67755CB5-1D7B-4A75-839E-317FE04280EC

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)实现,然后我不踏实,怀疑自己有兼容性问题,因为测试机器有限,所以跪求各位帮忙测试一下,发现问题欢迎微博上@,带上截图,机型,浏览器版本等,感激不尽!

测试地址:https://www.html.cn/b-mui/checkbox.html

测试地址二维码扫:

qr

兼容更多PC浏览器的美化请查看:美化单选框 radio 、多选框 checkbox 和 switch开关按钮 checkbox

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 一个适合移动端的checkbox

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    中间的勾勾是iconfont 最好不要用这些字库类! 现在的设计图PSD哪家没有 个性效果!所以你这个不通用!

    xinjunqing4年前 (2015-07-07)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏