美化 input checkbox 样式，利用图片或者 icon 图标

美化 input checkbox 样式，利用图片或者 icon 图标

原理是利用 :checked 状态选择器，替换样式，
默认的 checkbox 效果 隐藏在可视区域之外

<div class="input-box">
    <input class="input-check" type="checkbox" />
	<i class="icon icon-checked">i>
div>

less 编写的样式，scss, stylus 同样可用 just do it

.input-box {
     
    position: relative;
    .input-check {
     
        position: absolute;
        left: -9999em;
    }
    .icon-checked {
     
        display: inline-block;
        vertical-align: middle;
        font: normal normal normal 14px/1 "weui";
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        .icon-checked:before {
     
            content: '';
            display: block;
            margin: 0;
            font-size: 23px;
            border: 1px solid rgba(0,0,0,0.3);
        }
        &:checked + .icon-checked:before {
     
            content: '';
            background: url('imgurl') center no-repeat;
            background-size: 100%;
        }
    }
}

提炼为己所用

 <div class="zui-cells__checkbox">
 <label for="personal">
 	<div class="zui-cell__hd">
 		<input id="personal"
 		       type="radio"
               class="zui-check"
               name="merchantMainType"/>
        <i class="zui-icon-checked">i>
    div>
    <div class="zui-cell__bd">
    <p class="right">男p>
    div>
label>
div>

.zui-check {
     
  position: absolute;
  left: -9999em;
}

[class^="zui-icon-"],
[class*=" zui-icon-"] {
     
  display: inline-block;
  vertical-align: middle;
  font: normal normal normal 14px/1 "weui";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

[class^="zui-icon-"]:before,
[class*=" zui-icon-"]:before {
     
  display: inline-block;
  margin-left: .2em;
  margin-right: .2em;
}

.zui-cells__checkbox {
     
  .zui-cell__hd {
     
    padding-left: 8px;
    padding-right: 6px;
  }
  .zui-icon-checked:before {
     
    content: '';
    display: block;
    font-size: 23px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.3);
  }
  .zui-check:checked+.zui-icon-checked:before {
     
    content: '';
    background: url(../img/checked.png) center no-repeat;
    background-size: 100%;
    border: 0;
    outline: 0;
  }
}

参考： https://weui.io/#input