样式:
input[type="checkbox"] {
position: relative;
width: 25px;
height: 25px;
/* 用于控制 UI 控件的基于操作系统主题的原生外观。none 隐藏部件的某些特性 */
appearance: none;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #d9d9d9;
background-color: #fff;
border-radius: 50%;
}
input[type="checkbox"]:checked::before {
content: "\2713";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #f54500;
background-color: #f54500;
/* 对勾样式 */
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 25px;
}
主要注意点:appearance: none;