css修改原生checkbox的默认样式

不使用lable标签，直接上代码

/*  单选变方框 */
.radio-square,input[type='checkbox'] {
  appearance: none;
  position: relative;
  outline: none;
  width: 13px;
  height: 13px;
  &:before {
    content: '';
    width: 13px;
    height: 13px;
    border: 1px solid #767676;
    display: inline-block;
    border-radius: 2.5px;
  }
  &:hover:before {
    border: 1px solid #4f4f4f;
  }
  &:checked:before {
    content: '';
    border: 1px solid #0075ff;
    background: #0075ff;
  }
  &:checked:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 5px;
    height: 9px;
    border-width: 0 2px 2px 0;
    overflow: hidden;
    border-color: #fff;
    border-style: solid;
    transform: rotate(39deg);
    left: 4px;
    top: 1px;
  }
}
/*  单选变方框  end*/