纯css重写单选radio多选CheckBox样式，选中取消选中自定义。

好了先看看实现后的效果吧，样式可以自定义修改的，代码很容易看懂，新手都可以用；

上面是选中状态，下面是未选中状态，支持反选多选取消选中，看下面代码：

<!-- HTML部分 -->
<div  class="checkbox">
  <input type="checkbox"  id="checkbox1"/>
  <label for="checkbox1"><span class="icons"></span></label>
</div>

  //css 部分
  .checkbox {
    height: 20px;
    width: 20px;
    margin: 0 20px;
    border-radius: 50%;
    cursor: pointer;
    .icons{
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: #f0f0f0;
      z-index: 990;
      position: absolute;
      top: 7px;
      left: 7px;
    }
    input{
      display: none;
    }
    label{
      width: 100%;
      height: 30px;
      display: inline-block;
      line-height: 30px;
      position: relative;
      text-align: center;
    }
    label:active{
      background: #ffffff;
    }
    label:after{
      content: "";
      width: 18px;
      height: 18px;
      border: 1px solid #777;
      border-radius: 18px;
      display: inline-block;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    input:checked+label:after{
      border: 1px solid $theme;
      background-color: $theme;
    }
  }

好了，希望帮你解决问题，喜欢的小伙伴点个关注吧！