``
今天我们UI发了一张设计图,里面CheckBox长这样,然后我开始敲的时候发现不管我怎么改check样式都不能改变check的默认样式,后面去网上百度了一下,好多都说用伪类就可以改变,我一想,伪类可以改变他自身?一进去看代码,发现是通过伪类来重新创一个checkbox样式然后通过定位把原来的样式给遮挡住,就实现了改变checkbox的样式。下面附上我实现这个功能的代码供大家参考。
/* 修改checkbox的默认样式 */
input[type='checkbox'] {
width: 15px;
height: 15px;
outline: none;
margin-right: 10px;
cursor: pointer;
position: relative;
margin-bottom: 3px;
}
input[type='checkbox']:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: white;
border: 1px solid;
color: black;
display: inline-block;
visibility: visible;
padding: 0px 3px;
cursor: pointer;
}
input[type='checkbox']:checked:after {
content: "✓";
font-size: 12px;
background-color: orangered;
color: white;
}