纯CSS无法跨浏览器统一美化radio/checkbox，必须隐藏原生控件并用label+伪元素模拟；核心是input:checked + label结构，兼顾兼容性与可访问性。
纯 CSS 无法在所有浏览器中直接修改 radio 和 checkbox 的原生渲染样式——这是根本限制，不是写法问题。真正可行的方案是「隐藏原生控件 + 用 label 或伪元素模拟视觉层」，且必须配合正确的 HTML 结构与选择器逻辑。
为什么 appearance: none 不够用
虽然 -webkit-appearance: none 和 appearance: none 能在 Chrome/Firefox/Safari 中移除默认样式，但 IE 完全不支持，Edge 旧版本行为不一致，且即使设为 none，radio 仍无法设置宽高、背景图或 ::before/::after（部分浏览器会忽略）。更关键的是：:checked 状态无法直接驱动原生控件的伪元素变化——它压根不渲染这些伪元素。
所以只靠 appearance 的写法，在生产环境必然出现：
-
radio在 IE 中完全不可见（连点击区域都没了） - Firefox 中
checkbox:checked::after可能不触发 - 屏幕阅读器仍能读取原生控件，但视觉反馈断裂，可访问性降级
input + label 隐藏+关联是最稳的结构
核心逻辑：把 input 视觉隐藏但功能保留，所有样式和状态反馈都落在紧邻的 label 上，用 :checked + label 触发变化。这个模式兼容 IE9+，且无障碍支持良好（只要 label 正确绑定 for 或包裹 input）。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- HTML 必须是
<input type="checkbox" id="opt1"><label for="opt1">选项一</label>或<label><input type="checkbox">选项一</label>—— 不能只写input没label - CSS 隐藏
input推荐用position: absolute; opacity: 0; pointer-events: none;，比display: none或visibility: hidden更安全（前者让屏幕阅读器失效，后者仍占布局空间） - 状态样式写在
input:checked + label，不是label:checked（语法错误） - 若需图标，用
label::before或额外span，通过input:checked + label::before { content: "✓"; }控制显示
IE 和旧版 Edge 的降级处理
IE 不支持 :checked + label 中的 + 邻居选择器对动态状态的响应（只认初始状态），所以必须加一层 JS 监听或改用 class 切换。但多数项目已放弃 IE 支持；如必须兼容，可：
- 给
input绑定onclick，手动切换label的is-checkedclass - 用
@supports not (selector(:has(*)))区分现代/旧浏览器，对旧版只提供基础圆点/方块+文字色变，不依赖复杂背景图 - 避免使用
background-position多帧雪碧图方案——IE 对 background 渲染有缓存 bug，容易卡在未选中态
别踩这些坑
真实项目里高频翻车点：
- 忘记给
label设cursor: pointer，用户看不出可点击 - 用
input[type="checkbox"]:checked::after尝试画勾，结果在 Safari 中完全不显示（原生控件不支持伪元素） - 多个
radio的name值不一致，导致本该互斥却能多选——样式再美，逻辑错了就是 bug - 移动端没设
touch-action: manipulation，iOS 上点击延迟明显，反馈滞后 - 用
transform: scale()放大label内容时，未同步调整line-height和padding，文字被裁切
最麻烦的其实是状态同步：当 JS 动态设置 input.checked = true 时，CSS 的 :checked + label 会立即响应；但反过来，如果只操作 label 的 class，原生 input 状态不会变——表单提交时就丢数据了。所以视觉和状态必须始终以原生 input 为准，label 只是它的影子。
