不能直接给 checkbox/radio 写样式，因浏览器限制多、兼容性差且破坏可访问性；正确做法是用 absolute 隐藏原生控件但保留功能，再通过 :checked 与兄弟元素联动伪元素实现自定义视觉效果。
为什么不能直接给 input[type="checkbox"] 或 input[type="radio"] 写样式
浏览器对原生表单控件的样式控制非常有限，appearance 属性虽能部分重置（如 appearance: none），但 Safari 旧版本、IE 完全不支持，且即使设为 none，也无法可靠改变尺寸、颜色或添加伪元素。直接修改会遇到：勾选状态不响应、焦点丢失、可访问性（a11y）中断、屏幕阅读器无法识别。
用 absolute 隐藏原生控件的正确姿势
核心是把原生 input 移出可视区，但保留其功能和语义——它必须仍可聚焦、可点击、能触发 change 事件，且与 label 绑定关系不变。
- 绝对定位 +
left: -9999px（或position: absolute; opacity: 0; width: 1px; height: 1px;）比display: none或visibility: hidden更安全：前者让控件完全脱离可访问性树，后者仍占布局空间且可能被误触 - 务必确保
input和label在 DOM 中相邻或通过for/id正确关联，否则点击 label 不会触发选中 - 不要给隐藏的
input加tabindex="-1"：这会破坏键盘导航，用户无法用 Tab 键操作该控件
<label class="custom-checkbox">
<input type="checkbox" class="sr-only"><span class="checkmark"></span>
我已阅读并同意条款
</label>
<style>
.sr-only {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
</style>
如何用 ::before 和 ::after 模拟勾选/选中状态
自定义视觉反馈依赖于 input:checked 状态选择器联动 sibling 或 child 元素。由于原生 input 已被隐藏，所有 UI 元素必须是它的兄弟（如 span.checkmark）或父容器内的子元素。
- 使用
label > input:checked + .checkmark是最稳妥的兄弟选择方式；若结构是label > input > .checkmark，则无效（input不能有子元素） -
::before适合画外框（如复选框边框），::after适合画内图标（如 ✔ 或 ●），注意设置content: ""否则伪元素不渲染 - 动画需加在伪元素上，而非
.checkmark本身：因为:checked状态切换是离散的，CSS 过渡需作用于可变化的属性（如transform、opacity）
.custom-checkbox .checkmark::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
margin-right: 8px;
vertical-align: middle;
}
.custom-checkbox input:checked + .checkmark::after {
content: "✔";
display: inline-block;
width: 18px;
height: 18px;
color: #fff;
background: #007bff;
text-align: center;
line-height: 18px;
font-size: 12px;
margin-right: 8px;
vertical-align: middle;
}
兼容性与可访问性容易被忽略的关键点
隐藏原生控件后，很多开发者就忘了它仍是表单逻辑的核心。以下三点一旦遗漏，会导致真实用户无法使用：
- 键盘操作必须有效：Tab 进入后，空格键应切换状态；
input必须保留在 tab 顺序中，且要有清晰的:focus-visible样式（例如外发光轮廓） - 屏幕阅读器依赖
aria-checked等属性自动读取状态，无需手动加——只要原生input正常工作，这些语义就会透出 - 移动端点击区域至少 44×44px：把
label的padding或min-height设够，别只靠小图标响应点击
真正麻烦的不是画个好看的勾，而是让那个勾在盲人用户、键盘党、缩放 200% 的老人机上，都稳稳地“起作用”。样式可以炫，但语义链一断，整个交互就废了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
