原生 checkbox/radio 可通过 :checked + ~ 或 + 选择器联动自定义元素实现美化，需将 input 视觉隐藏（opacity:0）、用伪元素重绘，并确保 label 正确绑定、支持 focus/indeterminate 状态及可访问性。
用
+
或
选择器控制关联元素显示
原生
和
无法直接美化，但可以借助兄弟/后续兄弟选择器联动其他元素。关键前提是：自定义样式元素（如
或
:checked~+
）必须紧跟在
input
后，或在其后同级位置。
input:checked + label
：仅匹配紧邻的下一个兄弟
label
input:checked ~ .custom-icon
：匹配其后所有同级的
.custom-icon
，更灵活
若
input
在
label
内部（推荐写法），则无需依赖
+
/
~
，直接用
label > input:checked + span
等结构
隐藏原生控件并用
::before
/
::after
重绘
外观
最稳定的做法是将原生
input
视觉隐藏（不设
display: none
，否则失去可访问性和
表单提交
能力），再用
伪元素
绘制自定义样式。
隐藏原生控件：
input[type="checkbox"], input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; }
为关联的
label
添加自定义容器：
label .custom-control { position: relative; padding-left: 30px; }
用
::before
绘制外框，
::after
绘制选中态（如对勾、圆点）：
label .custom-control::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #999; border-radius: 4px; }
input:checked + .custom-control::after { content: "✓"; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 12px; }
处理 focus / indeterminate 状态提升可用性
仅支持
:checked
不够——键盘用户需要
:focus
样式，三态 checkbox 还需识别
:indeterminate
（JavaScript 设置
input.indeterminate = true
后生效）。
input:focus + .custom-control::before
应添加轮廓（
outline
）或阴影，确保焦点可见
input:indeterminate + .custom-control::after
可设置短横线或中间圆点：
input:indeterminate + .custom-control::after { content: ""; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
避免用
box-shadow
模拟 focus ring，部分屏幕阅读器不识别；优先用
outline
并配合
outline-offset
兼容性与可访问性必须检查的三项
自定义样式极易破坏语义和交互逻辑，上线前务必验证：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
label
必须正确绑定
for
属性或包裹
input
，否则点击文字无法触发选中
用屏幕阅读器（如 NVDA + Firefox）测试是否能读出“复选框 已选中”等状态，
aria-checked
一般不需要手动加——
浏览器
会自动同步原生
input
的状态
移动端 Safari 对
:checked + *
支持良好，但旧版 Android WebView 有延迟渲染问题，可加
transform: translateZ(0)
强制
硬件加速
真正难的不是画一个好看的勾，而是让那个勾在键盘导航、高对比度模式、语音指令下都准确响应。样式可以重写，语义断了就很难补救。