原生 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
兼容性与可访问性必须检查的三项
自定义样式极易破坏语义和交互逻辑，上线前务必验证：
