CSS自定义checkBox复选框- 对勾样式

有checkBox复选框需求时，我们所用的框架样式不符合，所以需要自己写 对勾样式，当然用图片也OK。

效果图：

html:

 <div class="msg-position c-bg-wt">
    <p>推送岗位<i class="c-rd">*</i>&nbsp;&nbsp;&nbsp;&nbsp;
      <i class="icon-span" :class="{'icon-span-select' : chkAllStatus, 'brand-btn':  chkAllStatus, 'brand-b':  chkAllStatus}" @click="chkAll"></i>
      全部</p>
    <div v-for="item in positions" class="msg-position-div hidden">
      <p style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">
        <i @click="chkPosition(item)" class="icon-span" :class="{'icon-span-select' : item.isActive, 'brand-btn':  item.isActive, 'brand-b':  item.isActive}"></i>
        {{item.positionName}}
      </p>
    </div>
  </div>

CSS：

 //对号样式
    .icon-span{
      display: inline-block;
      background-color: #fff;
      border-radius: 4px;
      border: 2px solid #7f7f7f;
      position: relative;
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }
    .icon-span::after{
      border: 2px solid transparent;
      border-left: 0;
      border-top: 0;
      content: " ";
      top: 2px;
      left: 5px;
      position: absolute;
      width: 4px;
      height: 8px;
      -webkit-transform: rotate(45deg) scale(0);
      transform: rotate(45deg) scale(0);
      -webkit-transition: -webkit-transform .2s;
      transition: -webkit-transform .2s;
      transition: transform .2s;
      transition: transform .2s, -webkit-transform .2s;
    }
    .icon-span-select{}
    .icon-span-select::after{
      border-color: #fff;
      -webkit-transform: rotate(45deg) scale(1);
      transform: rotate(45deg) scale(1);
    }

 后记

也写了vue的全选全不选功能，有需要请移步《VUEJS-全选&全不选》