html part
<label><input type="checkbox">身份证</label>
css section
Pseudo-earth elements modify the pattern of the checkbox
Border-style modifications before, the "\ 2713" character check character table
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; }