必须隐藏 radio input 并将交互与样式控制权交给 label，通过结构包裹或 for 关联确保可访问性，用 :checked + label 控制状态，兼顾键盘导航与 IE11 兼容。
用 CSS 重置 <input type="radio"> 的默认样式
浏览器对单选按钮的原生渲染无法直接改成按钮外观，必须先隐藏它，再用相邻兄弟选择器（+ label）或包裹结构把视觉控制权交给 label。关键不是“美化 input”，而是“让 label 承担点击和状态反馈”。
常见错误是只改 input 的 appearance，但 Safari 对 appearance: none 支持不稳定，且隐藏后若没正确绑定 label，会导致不可点击或状态不同步。
- 必须给每个
input设置position: absolute; opacity: 0; pointer-events: none;（比display: none更安全，保留语义和可访问性） -
label需带for属性（值等于对应input的id），或把input包在label内（更推荐后者，减少 id 管理） - 用
:checked + label或input:checked ~ label控制选中态样式，避免 JS 干预
实现按钮组的视觉连贯性与状态反馈
单选按钮组变成按钮样式后，核心诉求是：视觉上像一组互斥按钮，有统一边框、间距、悬停/聚焦/选中反馈。难点在于「未选中时的默认态」和「选中态的高亮区分」要足够清晰，否则用户无法感知当前选择。
容易踩的坑是只加 background-color，忽略焦点环（outline）和键盘导航支持，导致可访问性失败。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给
label设统一border和border-radius，相邻按钮间用margin-right: -1px消除双倍边框间隙 - 用
label:hover:not(:focus):not(:active)控制悬停，避免和键盘聚焦冲突 - 选中态优先用
input:checked + label设置background-color和color，同时保留label:focus-within或label:focus的outline - 移动端需加
touch-action: manipulation防止 300ms 延迟
保持表单提交与 JS 获取值的兼容性
样式重置不会影响表单行为，但开发者常误以为要手动监听 click 并设置 value——其实完全不需要。只要 input 在表单内、有 name、且未被 disabled，提交时自然携带选中项的 value。
JS 获取值时也应读 form.querySelector('input[name="xxx"]:checked')?.value，而不是去查 label 的 class 或文本。
- 确保所有同名
input的name完全一致（大小写敏感） - 不要给
label添加onclick或addEventListener('click', ...)，干扰原生 radio 逻辑 - 如需响应变化，监听
form的change事件即可，目标元素是input，不是label - 服务端接收时仍按普通 radio 处理，无需额外解析
IE11 兼容性处理要点
IE11 不支持 :focus-within 和部分伪类组合，且 appearance 完全无效，必须用更保守的隐藏方式。如果项目还需支持 IE11，不能依赖现代 CSS 选择器做状态控制。
最稳妥的方式是放弃 input + label 相邻选择器，改用 input 包在 label 内，并用 label > input:checked 这种后代选择器（IE11 支持）。
- 移除
position: absolute，改用clip: rect(0 0 0 0); clip-path: inset(50%);隐藏 input（比opacity: 0更可靠） - 避免使用
flex布局按钮组，IE11 的flex子项margin行为异常，改用inline-block+vertical-align: top - 选中态背景色建议用
filter: brightness(1.1)代替box-shadow，IE11 对box-shadow渲染有偏移
label），且 Space 或 Enter 要能触发选择——这依赖于 label 是否设了 tabindex="0"（仅当 label 未包裹 input 时需要）。如果用了包裹结构，就不用额外加 tabindex。 
