純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);
}