快速自定义复选框checkbox

在工作中常常需要使用checkbox 复选框，但是原生的样式又不好看。所以这个时候就需要自己修改样式

<input type="checkbox" v-model="checked" id="myCheck">
<label for="myCheck"></label>

使用label 来写样式

#myCheck + label{
    background-color: white;
    margin-right: 5px;
    margin-top: -2px;
    border-radius: 5px;
    border:1px solid #d3d3d3;
    width:14px;
    height:14px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}
#myCheck:checked + label{
    background-color: #51262D;
}
#myCheck:checked + label:after{
    content:"\2714";
    font-size: 12px;
    color: white;
}

删除原生的input =》 checkbox

#myCheck {
  display: none;
}