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-全选&全不选》

————————————————

版权声明：本文为CSDN博主「云胡不喜？」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_33242126/article/details/84384638

来自  https://blog.csdn.net/qq_33242126/article/details/84384638