在工作中常常需要使用checkbox 复选框,但是原生的样式又不好看。所以这个时候就需要自己修改样式
<input type="checkbox" v-model="checked" id="myCheck">
<label for="myCheck"></label>
使用label 来写样式
#myCheck + label{
background-color: white;
margin-right: 5px;
margin-top: -2px;
border-radius: 5px;
border:1px solid #d3d3d3;
width:14px;
height:14px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 20px;
}
#myCheck:checked + label{
background-color: #51262D;
}
#myCheck:checked + label:after{
content:"\2714";
font-size: 12px;
color: white;
}
删除原生的input =》 checkbox
#myCheck {
display: none;
}