单选按钮样式定制需隐藏原生input并用label伪元素实现：将input置于label内或用for绑定，设position: absolute; opacity: 0;，通过:checked + label::after控制圆点样式，禁用态需单独写input:disabled:checked + label::after，同时保障无障碍与键盘可访问性。
单选按钮默认样式无法直接修改，必须用:checked + label绕过
浏览器对 的原生控件样式限制极严，直接给它写 background-color 或 border 基本无效。真正可行的路径是：隐藏原生 radio，用紧邻的 元素承载视觉表现，并通过 :checked 伪类联动状态。
- 必须将
放在内部，或用for属性绑定id，否则点击 label 无法触发选中 -
需加position: absolute; opacity: 0;（不能只用display: none，否则失去可访问性和键盘焦点） - label 上的伪元素（如
::before）要设content: ""才能生效，空字符串也不行
用:checked + ::after 实现圆点填充效果
最常见需求是把默认圆圈换成自定义颜色/大小的实心圆点。关键不是改 input，而是控制 label 后面的装饰性伪元素。
label::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
input:checked + label::after {
background-color: #007bff;
border-color: #007bff;
}
- 注意选择器顺序：
input:checked + label::after要求 input 和 label 是相邻兄弟关系（即 input 在 label 外、且 label 紧跟其后） - 如果用
模式，则必须写成input#id:checked ~ label[for="id"]::after，用~而非+ - 不要依赖
appearance: none——Safari 旧版本和部分安卓 WebView 对 radio 的appearance支持不一致，兼容性差
禁用状态（disabled）下:checked失效，需单独处理
:checked 伪类在 disabled 的 radio 上不会匹配，所以即使选中了，你写的 input:checked:disabled + label::after 也不会触发。视觉上会“卡住”在未选中态。
- 必须显式写出
input:disabled:checked + label::after，且它的样式优先级要高于普通:checked规则 - 通常禁用时需要灰掉圆点：
background-color: #ccc; border-color: #ccc; - 别忘了同步处理 label 文字的
color和cursor，否则用户看不出已禁用
无障碍与键盘操作容易被忽略
隐藏原生 input 后，若不处理焦点和语义，屏幕阅读器可能读不出选项状态，Tab 键也无法聚焦到该控件。
- 确保
保留在 DOM 中、有name和value，且没加tabindex="-1" - label 文本必须可读，不能靠伪元素纯图形表达（比如只画个勾而不写文字）
- 如果 label 里只有图标，务必加
aria-label或选项A - 测试时按 Tab 切换，确认 focus outline 出现在 label 上，且空格键能切换选中状态
实际项目里最常漏掉的是禁用态样式和键盘焦点反馈——看起来点得动，但盲人用户或键盘党根本不知道当前选中了谁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
