css写一个checkbox

纯css写一个checkbox

  <span>
    <b class="checkbox" :class="{ checked: item.active }"></b>
    </span>

 .checkbox {
    width: 16px;
    height: 16px;
    background-color: #c8c9cc;
    display: inline-block;
    vertical-align: top;
    position: relative;
    top: 2px;
    margin-right: 10px;
    &.checked {
      background-color: #3a84ff;
    }
    &:before,
    &:after {
      height: 2px;
      content: "";
      background-color: #fff;
      position: absolute;
    }
    &:before {
      width: 6px;
      left: 2px;
      top: 9px;
      transform: rotate(45deg);
    }
    &:after {
      width: 8px;
      right: 2px;
      top: 7px;
      transform: rotate(-45deg);
    }
  }