更改checkbox的默认样式

最近作一个vue项目要用到checkbox要修改默认样式，选中是纯白色，不选择只有白色边框，起初觉得很容易，没想到还折腾了一翻，记录一下。

几经折腾，理清input 和label的关系

最终改进版本，将复选框隐藏，利用label元素的焦点传递特性，用label的样式替代复选框。这应该是最简版了，能够随意改样式了。

贴上代码：

   <div class="container">

<input type="checkbox" value=""  @change="bindProductCheck1" v-model="ckeckVal"
       id="checkbox-p1" style="display: none;">
<label for="checkbox-p1"></label>
</div>

.container{
display:flex;
}

#checkbox-p1 + label {  width:44px;  height:44px;  box-sizing: border-box;  border-radius: 22px;  border: 4px solid #fff;}#checkbox-p1:checked + label {  background-color: #ffffff;}因此了解底层原理就没那么容易被坑了