原生 radio 无法直接用 css 改变圆圈形状或颜色，必须隐藏后用 label 或伪元素模拟；直接设置 background 等属性无效，因浏览器硬编码渲染；应使用 opacity: 0 + absolute 隐藏并确保 label 关联，再通过 ::before 和 input:checked + label::before 实现自定义样式与状态切换。
原生 <input type="radio"> 无法直接用 CSS 改变圆圈形状或颜色，必须隐藏它，再用 <label></label> 或伪元素模拟视觉效果。否则所有“改样式”的尝试都会失败。
为什么直接写 input[type="radio"] { background: red; } 没用
浏览器对 input[type="radio"] 的渲染是硬编码的，绝大多数 CSS 属性（如 background、border、color）对其无效。部分新版本 Chrome/Firefox 支持 accent-color，但兼容性差、控制粒度粗，且不支持图标替换或复杂状态。
常见错误现象：
- 写了样式但完全没反应
- 在 DevTools 里看到样式被划掉（invalid）
- 仅在某个浏览器生效，换一个就回退成原生圆圈
用 opacity: 0 + position: absolute 隐藏原生控件
这是最稳妥、无障碍友好的隐藏方式。不能用 display: none 或 visibility: hidden，否则屏幕阅读器会跳过该控件，表单提交时 value 也可能丢失。
实操建议：
input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; }- 确保
<label></label>和<input>正确关联（用for属性或包裹结构） - 给
<label></label>加position: relative，方便后续用::before定位自定义圆圈
用 ::before 画自定义圆圈并响应 :checked
核心逻辑是：用伪元素画未选中态（空心圆），再用 input:checked + label::before 覆盖为实心圆或图标。
示例关键代码：
label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
input:checked + label::before {
background: #007bff;
border-color: #007bff;
}
注意点：
- 必须用
input:checked + label::before（相邻兄弟选择器），不能写成label:checked::before（label 没有 checked 状态） - 如果 label 不是 input 的紧邻兄弟（中间插了其他元素），要改用 JavaScript 监听或调整 HTML 结构
- 想加动画？给
background或transform加transition即可，但避免对content做过渡
卡片式单选按钮的布局与交互陷阱
把每个选项包进 <div class="card"> 是常见需求，但容易忽略两个细节：
<ul>
<li>每个 <code><input> 必须有唯一 id，对应 <label for="xxx"></label>，否则点击卡片文字无法触发选择
input:checked ~ .card 这类后代/通用兄弟选择器，会导致样式污染（比如选中 A 后，B 卡片也变色），应严格使用 input:checked + label 或 JS 控制label 加 padding 或 min-height，别只依赖文字尺寸最易被忽略的是可访问性：隐藏原生控件后，必须保留键盘导航（Tab）、空格/回车切换，以及屏幕阅读器能读出 label 文本和当前选中状态。纯 CSS 方案天然支持这些，但一旦引入 JS 手动 toggle class，就很容易破坏 checked 属性同步，导致表单提交值错乱。
