通过 CSS 自定义 radio 按钮外观时，浏览器默认会为 :hover 和 :active 状态添加深色/浅色叠加效果，导致 accent-color 显示失真；本文提供纯 CSS 方案（无需 JS），利用伪元素 + :has() 实现完全可控的静态色彩表现。
通过 css 自定义 radio 按钮外观时，浏览器默认会为 `:hover` 和 `:active` 状态添加深色/浅色叠加效果，导致 `accent-color` 显示失真；本文提供纯 css 方案（无需 js），利用伪元素 + `:has()` 实现完全可控的静态色彩表现。
现代浏览器（Chrome 105+、Edge 105+、Firefox 121+、Safari 16.4+）支持 :has() 选择器，这使得我们能精准响应 <input type="radio"> 的选中状态，同时彻底规避原生控件的交互样式干扰。核心思路是：隐藏原生 radio 元素（opacity: 0），用 ::after 伪元素构建完全自定义的视觉层，并仅在 :checked 时切换背景图，从而绕过所有浏览器默认的 hover/active 色彩变换逻辑。
以下为完整可运行示例：
<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 #e74c3c; /* 外圈颜色 */
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
}
.radio-wrapper:has(input:checked)::after {
background-image: radial-gradient(#e74c3c 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 隐藏原生 radio，但保留其可访问性与表单功能（键盘 Tab、空格键切换仍有效）；
- ::after 伪元素承担全部视觉渲染，不受 accent-color 或浏览器默认交互样式影响；
- :has(input:checked) 精准捕获选中状态，配合 radial-gradient 实现内圆高亮效果；
- 边框色（border-color）和渐变色（radial-gradient 中的颜色）可独立设置，支持任意颜色组合；
- 所有尺寸、间距、颜色均可按需调整，完全脱离原生控件限制。
⚠️ 注意事项：
- 若需兼容旧版浏览器（如 IE 或早期 Chrome/Firefox），需回退至 JavaScript 监听事件 + 动态 class 切换方案；
- :has() 在 Safari 中需 macOS Monterey 12.3+ 或 iOS 15.4+，生产环境建议添加 @supports 检测；
- 不要为 .radio-wrapper 设置 pointer-events: none，否则会阻断点击穿透到 input；
- 同组 radio 必须共用 name 属性，确保互斥行为正常。
此方案不仅解决了悬停变暗、点击变亮的问题，更赋予开发者对 radio 按钮外观的完全控制权——颜色恒定、动画可控、语义完整，是现代 Web 表单定制的推荐实践。
