checkbox默认样式修改
html部分
<label><input type="checkbox">身份证</label>
css部分
使用伪类元素对checkbox样式进行修改
边框样式在before中修改,"\2713"为字符表勾选字符
input[type="checkbox"] { width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 18px; margin-right: 10px; position: relative; } input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; background: #fff; width: 100%; height: 100%; border: 1px solid #d9d9d9; border-radius: 4px; } input[type="checkbox"]:checked::before { content: "\2713"; background-color: #fff; position: absolute; top: 0; left: 0; width: 100%; border: 1px solid #7D7D7D; border-radius:4px; color: #7D7D7D; font-size: 20px; font-weight: bold; }