最近做一个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 {
44px;
height:44px;
box-sizing: border-box;
border-radius: 22px;
border: 4px solid #fff;
}
#checkbox-p1:checked + label {
background-color: #ffffff;
}
所以了解底层原理就没那么容易被坑了
对于单选框
<div class="radio-inline">
<input type="radio" id="radio0" value="15">
<label for="radio0">设备损坏</label>
</div>
.radio-inline {
height: 0.8rem;
line-height: 0.8rem;
min- 1.8rem;
input {
margin: 0.2rem;
}
input[type=radio] {
/*去除浏览器默认样式*/
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
/*自定义样式*/
position:relative;
display:inline-block;
0.3rem;
height:0.3rem;
line-height: 0.3rem;
border:1px solid #999;
outline:none;
cursor:pointer;
/*设置为圆形，看起来是个单选框*/
-webkit-border-radius:0.15rem;
-moz-border-radius:0.15rem;
border-radius:0.15rem;
vertical-align:middle;
}
input[type=radio]:after {
content:'';
position:absolute;
0.3rem;
height:0.3rem;
display:block;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
background-color: transparent;
border:none;
}
input[type=radio]:checked:after {
0.2rem;
height:0.2rem;
display:block;
background: transparent;
background-color:#0b59a9;
-webkit-border-radius:0.15rem;
-moz-border-radius:0.15rem;
border-radius:0.15rem;
-webkit-appearance:none;
border:none !important;
}
input[type=radio]:checked{
background: transparent;
-webkit-appearance:none;
appearance:none;
border:1px solid #0b59a9;
//border:none
}
display: flex;
align-items: center;
justify-content: left;
label{
color:#333;
font-size:0.24rem;
}