直接修改原生 checkbox 样式无效，因浏览器限制其 CSS 属性；应隐藏 input 并用 label + 伪元素模拟，确保可访问性、焦点、键盘操作及移动端触控体验。
为什么直接改 <input type="checkbox"> 的样式没用
因为浏览器对原生 <input type="checkbox"> 的渲染控制极强，border、background、width 等 CSS 属性在多数浏览器里会被忽略（尤其是 Chrome 和 Safari）。你看到的“能改”往往只是伪类生效了，但勾选状态、焦点反馈、可访问性全丢了。
真正可靠的做法是：隐藏原生 checkbox，用 <label> 包裹它，再通过 :checked + ::before/::after 模拟视觉层。
- 必须给
<input>加position: absolute; opacity: 0; pointer-events: none;—— 单纯display: none或visibility: hidden会让它无法被键盘聚焦、屏幕阅读器跳过 -
<label>必须和<input>关联（用for属性或嵌套），否则点击无效 - 模拟框的尺寸建议设为
16px × 16px到20px × 20px，太小影响触控/点击精度
用 ::before 绘制自定义方框 + 勾选图标
核心是利用 label::before 画边框，input:checked + label::after 叠加对勾。注意顺序和层级：
input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
input[type="checkbox"] + label {
position: relative;
padding-left: 28px;
cursor: pointer;
}
input[type="checkbox"] + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 4px;
}
input[type="checkbox"]:checked + label::after {
content: "✓";
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #2a75f3;
}
- 别用 Unicode ✅（U+2705）—— 它在某些系统字体下会变大、偏移，✓（U+2713）更稳定
-
transform: translateY(-50%)比top: Xpx更可靠，适配不同行高 - 如果需要圆角或动画，给
::before加transition: all 0.2s ease，但避免对content做过渡（不支持）
支持键盘操作和屏幕阅读器的关键配置
美化后最容易丢的是可访问性。用户按 Tab 进入、空格切换、屏幕阅读器读出“复选框，未选中”，这些都不能少。
立即学习“前端免费学习笔记（深入）”；
- 确保
<input>有id，<label>用for="xxx"显式关联 - 加上
aria-label或让<label>文本本身有意义（例如不要只写“点我”） - 用
:focus-within或input:focus + label::before给焦点态加 outline（如box-shadow: 0 0 0 2px rgba(42, 117, 243, 0.3)） - 禁用状态要同步：
input:disabled + label::before { opacity: 0.5; cursor: not-allowed; }
移动端点击区域小？加 min-height 和 padding
在 iOS 和 Android 上，如果 <label> 内容短、点击热区窄，很容易点不中。原生 checkbox 的点击区域其实比视觉大得多，自定义时得手动补足。
- 给
label设min-height: 44px（iOS 推荐最小触控尺寸） -
padding-top和padding-bottom至少各12px，保证手指误触也能触发 - 避免把
label设为display: inline后又只靠文字撑开高度——明确设display: inline-block或flex - 真机测试时，打开系统「辅助功能 > 触控 > 提示」看是否高亮准确
最麻烦的不是画得像不像，而是状态同步和交互反馈是否跟原生一致。哪怕加一行 input:checked ~ .icon::before { opacity: 1; }，也要确认它在 Safari 移动端、Edge 旧版、NVDA 屏幕阅读器里都走对逻辑。
