checkbox默认样式修改

mac2022-06-30  30

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; }

  

转载于:https://www.cnblogs.com/renewload/p/11225037.html

最新回复(0)