原生 checkbox/radio 可通过 :checked + ~ 或 + 选择器联动自定义元素实现美化，需将 input 视觉隐藏（opacity:0）、用伪元素重绘，并确保 label 正确绑定、支持 focus/indeterminate 状态及可访问性。
用 :checked + ~ 或 + 选择器控制关联元素显示
原生 <input type="checkbox"> 和 <input type="radio"> 无法直接美化，但可以借助兄弟/后续兄弟选择器联动其他元素。关键前提是：自定义样式元素（如 <span> 或 <div>）必须紧跟在 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 后生效）。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
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
兼容性与可访问性必须检查的三项
自定义样式极易破坏语义和交互逻辑，上线前务必验证：
立即学习“前端免费学习笔记（深入）”；
-
label必须正确绑定for属性或包裹input，否则点击文字无法触发选中 - 用屏幕阅读器（如 NVDA + Firefox）测试是否能读出“复选框 已选中”等状态，
aria-checked一般不需要手动加——浏览器会自动同步原生input的状态 - 移动端 Safari 对
:checked + *支持良好，但旧版 Android WebView 有延迟渲染问题，可加transform: translateZ(0)强制硬件加速
真正难的不是画一个好看的勾，而是让那个勾在键盘导航、高对比度模式、语音指令下都准确响应。样式可以重写，语义断了就很难补救。
