通过 CSS 自定义单选按钮外观时，原生 accent-color 会受浏览器默认交互状态（hover/active）影响导致颜色深浅变化；本文提供纯 CSS 方案——利用伪元素覆盖原生控件，实现颜色恒定、无状态干扰的稳定视觉效果。
通过 css 自定义单选按钮外观时，原生 `accent-color` 会受浏览器默认交互状态（hover/active）影响导致颜色深浅变化；本文提供纯 css 方案——利用伪元素覆盖原生控件，实现颜色恒定、无状态干扰的稳定视觉效果。
在现代浏览器中，accent-color 确实能快速统一单选按钮的主色调，但其底层仍依赖系统级渲染逻辑：悬停时自动加深、按下（active）时自动提亮，这种行为无法通过 :hover 或 :active 选择器直接覆盖 accent-color ——因为该属性不响应这些伪类的状态变更。
要真正实现“颜色恒定不变”，推荐采用视觉替代法：隐藏原生 <input type="radio">，用 ::after 伪元素构建完全可控的自定义圆点，并通过 :has() 选择器监听选中状态。此方案无需 JavaScript，兼容 Chrome 105+、Edge 105+、Firefox 121+（Safari 15.4+ 支持有限，需注意兼容性）。
以下为完整实现代码：
<style>
.radio-wrapper {
position: relative;
display: inline-block;
margin: 10px;
}
.radio-wrapper::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 60px; height: 60px;
border: 2px solid red;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
pointer-events: none; /* 确保点击穿透到下层 input */
}
.radio-wrapper:has(input:checked)::after {
background-image: radial-gradient(red 0 30%, transparent 30% 100%);
}
input[type="radio"] {
opacity: 0;
position: absolute;
width: 60px;
height: 60px;
margin: 0;
cursor: pointer;
}
</style>
<div class="radio-wrapper">
<input type="radio" name="theme" value="red">
</div>
<div class="radio-wrapper">
<input type="radio" name="theme" value="blue">
</div>
<div class="radio-wrapper">
<input type="radio" name="theme" value="green">
</div>✅ 关键要点说明：
- opacity: 0 隐藏原生控件，但保留可访问性与表单功能（键盘 Tab、空格切换仍有效）；
- pointer-events: none 应用于伪元素，确保用户点击区域仍能触发底层 radio 的选中逻辑；
- :has(input:checked) 是核心状态钩子，仅当内部 radio 被选中时才渲染填充色；
- radial-gradient 实现精准的圆形高亮填充，避免 background-color 导致的边缘模糊；
- 边框颜色（border-color）与渐变色（radial-gradient）可独立设置，轻松支持多色主题。
⚠️ 注意事项：
- 若需支持旧版浏览器（如 Safari < 15.4），可改用 label + input 结合 ~ 或 + 邻接选择器 + input:checked + label::before 的传统方案；
- 所有 .radio-wrapper 必须包裹对应 <input>，且 name 属性一致以保证单选组逻辑；
- 建议为 input 添加 cursor: pointer 提升点击反馈感；
- 如需适配深色模式，可结合 @media (prefers-color-scheme: dark) 动态调整边框与填充色。
该方法从根本上规避了浏览器对原生控件的交互样式干预，让设计者完全掌控视觉表现，是构建一致性 UI 组件的可靠实践。
