CSS自定义单选按钮样式技巧

本文深入解析了CSS自定义单选按钮（radio）样式的实战技巧与关键陷阱：由于浏览器严格限制原生控件样式，必须通过隐藏input（用`position: absolute; opacity: 0`而非`display: none`以保无障碍）、绑定label、并利用`:checked + label::after`等伪类组合控制视觉表现；同时强调禁用态需单独声明`input:disabled:checked + label::after`，并兼顾键盘焦点、屏幕阅读器支持、语义化标签和可访问性测试——真正实现既美观又健壮、兼容主流环境且对所有用户友好的自定义单选组件。

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

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

• 必须将 <input> 放在 内部，或用 for 属性绑定 id，否则点击 label 无法触发选中
• <input> 需加 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 键也无法聚焦到该控件。

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

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

本篇关于《CSS自定义单选按钮样式技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！