HTML
<input type="checkbox" name="check" class="check">
<!-- 单选框同此 -->
CSS
1、需要取消单选框自身样式
.check {
display: inline-block;
vertical-align:middle;
appearance: none; /* 取消自身块样式*/
font-weight: 500;
color:#00f;
}
2、使用伪元素完成复选框样式
.check::after{ /* 伪元素样式即边框样式 */
display: block;
content:''; /* 未选中样式 */
width:1em;
height: 1em;
text-align: center;
border:1.6px solid #00f;
border-radius: 2px;
}
.check:checked::after{
content:'\2714'; /* 选中时样式,这里使用content编码--对号 */
}