直接给 checkbox 加样式无效是因浏览器限制原生外观；需先用 -webkit-appearance: none 等重置，再通过隐藏 input + label 伪元素实现自定义；须保障可访问性与点击热区。
为什么直接给 input[type="checkbox"] 加样式没用？
因为浏览器对原生表单控件（尤其是 input[type="checkbox"]）的渲染有强限制，appearance 默认为 auto 或 checkbox，导致你写的 width、height、background 大部分被忽略。这不是你写错了，是浏览器故意拦着。
关键一步是先“干掉”原生外观：
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
注意：必须同时写三个前缀，appearance 在 Safari 15.4+ 和 Firefox 87+ 才稳定支持，漏掉任一前缀都可能在某个浏览器里失效。怎么让自定义 checkbox 响应点击和状态变化？
不能只改 input，得靠它后面的 label 或相邻元素来承载视觉表现。最可靠的方式是把 input 隐藏，用 label 的 ::before 或 ::after 伪元素画勾选框，并通过 :checked 控制状态。
常见结构：
<input type="checkbox" id="agree"><label for="agree">我同意条款</label>然后绑定样式：
input[type="checkbox"] { display: none; }
label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
border: 2px solid #999;
vertical-align: middle;
}
input:checked + label::before {
background: #007bff;
border-color: #007bff;
}
input:checked + label::before {
/<em> 画对勾 </em>/
background: #007bff;
position: relative;
}
input:checked + label::before::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
line-height: 1;
}
要点：-
display: none比visibility: hidden更安全，避免焦点/可访问性问题 - 必须用
+（相邻兄弟选择器），不是~，否则状态不同步 - 对勾用字符
"✓"最轻量；若要 SVG 或路径，得用background-image，但要注意尺寸缩放
如何保持可访问性和键盘操作支持？
隐藏 input 后，屏幕阅读器仍需读取其 name、id 和 aria-label，且 Tab 键必须能聚焦到该控件。如果只靠 label::before，键盘用户按空格无法触发勾选。
正确做法：
- 保留
input在 DOM 中（别删掉） - 不用
display: none，改用视觉隐藏（但别影响焦点）：input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }这样它仍在 tab 顺序中，空格键有效，屏幕阅读器也能正常播报 - 确保
label有for属性且值匹配input的id - 若用 JS 动态控制，记得同步设置
input.checked = true，别只改 class
移动端点击区域太小怎么办？
原生 checkbox 点击热区极小，自定义后若只设 18×18px，手指点不准。解决方法不是放大伪元素，而是扩大「可响应点击」的区域：
- 给
label设padding或min-height，比如：label { padding: 8px 0; display: inline-block; } - 或者把伪元素放在
label内部，再用label的内边距撑开热区 - 别忘了加
cursor: pointer，让用户感知可点 - iOS 上若仍有延迟，检查是否漏了
viewportmeta 或触发了双击缩放
真正麻烦的是：不同浏览器对 appearance 的处理差异、伪元素在 label 里的继承行为不稳定、以及无障碍测试时容易漏掉 focus outline 的重绘。这些地方不跑真机+读屏器很难发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
