纯css无法直接美化原生单选框，需隐藏input并用label+伪元素模拟；批量“选中所有”单选框在逻辑上不可行，因同name单选框组天然互斥。
用 input[type="radio"] 选中所有单选框，但别指望它能直接改外观
纯 CSS 无法直接美化 <input type="radio"> 的原生控件——浏览器对它的样式支持极有限，appearance: none 虽可隐藏原生样式，但后续必须手动实现选中态、焦点态、禁用态等视觉反馈，否则交互会“消失”。真正可行的路径是：隐藏原生 radio，用相邻兄弟选择器（+）或通用兄弟选择器（~）绑定自定义标签（<label></label>），再通过 :checked 控制伪元素或背景图。
为什么不能只写 input[type="radio"] { border: 2px solid red; }
这条规则多数情况下无效，原因有三：
- Chrome / Edge / Safari 默认禁用大部分盒模型属性（
border、padding、background）作用于原生 radio；Firefox 略宽松但也不稳定 - 即使生效，也仅影响控件外框，无法控制内部圆点、尺寸缩放、对齐方式
- 无障碍访问（如屏幕阅读器）依赖原生 input 的语义和状态，粗暴覆盖可能破坏
aria-checked同步或键盘导航（Tab → Space 切换）
安全可靠的自定义方案：隐藏 + label + :checked
核心思路是把用户点击行为转移到 <label></label> 上，再用 CSS 模拟 radio 外观。关键点：
- 给每个
input设置position: absolute; opacity: 0; pointer-events: none;（比display: none或visibility: hidden更安全，保留语义和可访问性） -
label必须与input关联（通过for="id"或包裹结构），否则input:checked + label不会触发 - 用
label::before绘制圆圈，input:checked + label::after绘制内部圆点，两者用position: absolute叠加 - 务必添加
label:focus-within::before或input:focus + label::before来支持键盘聚焦样式，否则 WCAG 2.1 会失败
input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
input[type="radio"]:checked + label::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: #007bff;
border-radius: 50%;
margin-left: -19px;
margin-top: 4px;
}
批量选中所有 radio？别这么干
DOM 中不存在“全选/反选”单选框的概念——单选框组（name 相同）天然互斥，选中一个即自动取消其他。所谓“选中所有”，实际是误操作或需求理解偏差：
- 若想初始化默认选中，只需在 HTML 中给某个
input加checked属性，或用 JS 设置element.checked = true - 若想批量操作（如重置为未选中），需遍历同名 radio 并设
.checked = false，但注意：这会让整个组处于“无选中项”状态，需确认业务是否允许 - 若后端要求提交空值，更稳妥做法是服务端接受
null或缺失字段，而非前端强行“选中所有”（技术上不可行，逻辑上反模式）
真正容易被忽略的是：自定义 radio 样式后，label 的点击热区必须足够大（建议 ≥ 44×44px），否则移动端点击困难；同时，input 的 name 属性不能遗漏，否则分组失效，变成多个独立单选框。
