更改checkbox的默认样式

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

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

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

贴上代码：

   

       id="checkbox-p1" style="display: none;">

.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;
}
所以了解底层原理就没那么容易被坑了

 

转载于:https://www.cnblogs.com/yszblog/p/10144056.html