CSS如何自定义单选按钮选中的样式_利用:checked伪类实现

处理CSS如何自定义单选按钮选中的样式_利用:checked伪类实现这类问题时，先确认目标场景，再按步骤核对配置或玩法细节。

单选按钮样式定制需隐藏原生input并用label伪元素实现：将input置于label内或用for绑定，设position: absolute; opacity: 0;，通过:checked + label::after控制圆点样式，禁用态需单独写input:disabled:checked + label::after，同时保障无障碍与键盘可访问性。

单选按钮默认样式无法直接修改，必须用:checked + label绕过

浏览器对 <input type="radio"> 的原生控件样式限制极严，直接给它写 background-color 或 border 基本无效。真正可行的路径是：隐藏原生 radio，用紧邻的 <label> 元素承载视觉表现，并通过 :checked 伪类联动状态。

1. 必须将 <input> 放在 <label> 内部，或用 for 属性绑定 id，否则点击 label 无法触发选中
2. <input> 需加 position: absolute; opacity: 0;（不能只用 display: none，否则失去可访问性和键盘焦点）
3. 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;}

1. 注意选择器顺序：input:checked + label::after 要求 input 和 label 是相邻兄弟关系（即 input 在 label 外、且 label 紧跟其后）
2. 如果用 <label for="id"> 模式，则必须写成 input#id:checked ~ label[for="id"]::after，用 ~ 而非 +
3. 不要依赖 appearance: none——Safari 旧版本和部分安卓 WebView 对 radio 的 appearance 支持不一致，兼容性差

禁用状态（disabled）下:checked失效，需单独处理

:checked 伪类在 disabled 的 radio 上不会匹配，所以即使选中了，你写的 input:checked:disabled + label::after 也不会触发。视觉上会“卡住”在未选中态。

1. 必须显式写出 input:disabled:checked + label::after，且它的样式优先级要高于普通 :checked 规则
2. 通常禁用时需要灰掉圆点：background-color: #ccc; border-color: #ccc;
3. 别忘了同步处理 label 文字的 color 和 cursor，否则用户看不出已禁用

无障碍与键盘操作容易被忽略

隐藏原生 input 后，若不处理焦点和语义，屏幕阅读器可能读不出选项状态，Tab 键也无法聚焦到该控件。

1. 确保 <input> 保留在 DOM 中、有 name 和 value，且没加 tabindex="-1"
2. label 文本必须可读，不能靠伪元素纯图形表达（比如只画个勾而不写文字）
3. 如果 label 里只有图标，务必加 aria-label 或 <span class="sr-only">选项A</span>
4. 测试时按 Tab 切换，确认 focus outline 出现在 label 上，且空格键能切换选中状态

实际项目里最常漏掉的是禁用态样式和键盘焦点反馈——看起来点得动，但盲人用户或键盘党根本不知道当前选中了谁。