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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33242126/article/details/84384638

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

效果图：

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