更改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;}因此瞭解底層原理就沒那麼容易被坑了