纯css实现CheckBox自定义样式

 

先效果图：

 代码：

<label class="checkBoxStyle" >
  <input class="inputstyle" type="checkbox" name="checkList" value="222" v-model="checkedVal"/>
  <span class="spanStyle inputStyleDemo"></span>
</label>

样式：

.checkBoxStyle{
  display:inline-block
}
.inputstyle{
  display:none
}
.inputStyleDemo{
  background-color:#fff;
  border:0.02rem solid #007cf7;
  box-shadow: 0px -1px 0px 0px #85afd8 inset,   /*上边阴影  红色*/
              -1px 0px 0px 0px #85afd8 inset,   /*左边阴影  绿色*/
              1px 0px 0px 0px #85afd8 inset,    /*右边阴影  蓝色*/
              0px 1px 0px 0px #85afd8 inset;    /*下边阴影  黄色*/
  border-radius:0.08rem;
  overflow: hidden;
  display:block;
  height:0.4rem;
  width:0.4rem;
  position: relative;
  box-sizing: border-box;
}
.inputstyle:checked + .inputStyleDemo:after{
  content: '';
  position: absolute;
  border-color: #007cf7;
  border-style: solid;
  border-width: 0 0.04rem 0.04rem 0;
  width: 0.12rem;
  height: 0.24rem;
  top: 0;
  left: 0.11rem;
  transform: rotate(45deg);
}