更改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;
}
所以了解底層原理就沒那么容易被坑了