CSS部分
label{
height:1.25rem;
display:inline-block;
cursor:pointer;
color: #333;
}
input[type=checkbox] {
position: relative;
width: 15px;
height: 13px;
margin-right: 5px;
}
input[type=checkbox]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
color: white;
font-size: 15px;
background-color: #999;
border-radius: 4px;
}
input[type=checkbox]:checked::before {
color: white;
background-color: #26D09F;
content: '√';
}
html部分
<label><input type="checkbox"><span>Inder ORT</span></label>
效果
稍微解释一下:
其实checkbox的样式还是浏览器的原始样式,只是它的大小和位置改了一下,然后在它的上面(::before)重画了一个假象。