单选按钮组在深色模式下背景/边框消失，需显式声明 appearance: none、border、background-color 等属性，并针对高对比模式用 ButtonText/Highlight 等系统语义色及 outline/::after content 替代 background。
单选按钮组在深色模式下背景/边框消失怎么办
原生 在深色模式下常出现「看不见」——不是代码写错了，而是浏览器默认样式被系统重置后，background-color 和 border-color 都失效了，只剩一个几乎透明的圆点。
必须显式声明所有视觉属性，不能依赖默认值：
-
appearance: none清除原生样式，从零控制外观 - 用
border+background-color重绘圆点和外圈（注意：深色模式下别用浅灰描边，比如#ccc在#121212背景上对比度仅 1.8:1） - 悬停/聚焦态必须单独适配：
input[type="radio"]:hover::before之类伪元素要基于var(--radio-border)动态计算，而不是固定值 - 禁用态用
opacity: 0.5+border-color: var(--radio-border-disabled)，避免直接设color: #666导致在深色背景上不可见
高对比度模式下单选按钮完全不可识别
Windows 高对比主题或 @media (forced-colors: active) 下，background-color、box-shadow、甚至 CSS 变量定义的颜色都会被系统强制清空。此时只靠填充色和描边无法建立视觉结构。
正确做法是放弃「模拟原生圆点」，改用系统级可渲染的组合：
- 用
border和outline构建主轮廓：例如border: 3px solid ButtonText - 焦点状态必须强化：
input[type="radio"]:focus { outline: 2px solid Highlight; outline-offset: 2px; } - 选中态改用
::after伪元素 +content: "●"，并设color: ButtonText—— 文字字符在高对比下不会被抹掉 - 绝对不要用
background-image或 SVG 内联填充，它们在高对比下一律不显示
label 与 radio 关联后颜色不一致
常见错误是只给 input[type="radio"] 设颜色，却忘了 label 的文本色也得响应主题。更隐蔽的问题是：当 label 包裹 radio 时，某些浏览器会把 label 的 color 继承给 input 的伪元素，导致深色模式下文字发灰。
安全写法是解耦控制：
- 为
label单独声明color: var(--text-primary)，不要依赖继承 - radio 的视觉层（
::before/::after）全部用border-color和color控制，避开background - 检查是否误用了
opacity实现禁用态——高对比下 opacity 会进一步削弱本已脆弱的对比度，应改用color: GrayText+border-color: GrayText - 若使用
for属性而非包裹结构，确保id值在 DOM 中唯一且无特殊字符（如id="opt-1"合法，id="opt[1]"可能导致 CSS 选择器失效）
切换主题时 radio 状态丢失或样式错乱
问题不在 JS 切换逻辑本身，而在于 CSS 变量作用域和重绘时机。很多页面切完 data-theme，radio 圆点颜色没变，是因为变量没刷新或选择器权重不够。
关键约束条件：
- CSS 变量必须在
:root和[data-theme="dark"] :root中成对定义，漏掉任一者都会导致 fallback 到初始值 - radio 样式规则必须带
html[data-theme="dark"]前缀，例如：html[data-theme="dark"] input[type="radio"]::before { border-color: var(--radio-border-dark); } - 不要用
@media (prefers-color-scheme: dark)单独控制 radio —— 它无法响应 JS 主动切换 - 如果 radio 是动态插入（如 Vue/React 渲染），确保父容器没有内联
style="color: #000"这类硬编码，否则会覆盖 CSS 变量
最易被忽略的是表单控件的「系统语义色」调用。深色模式下，Canvas 和 ButtonText 这类关键字比任何十六进制值都可靠；高对比模式下，它们是唯一不会被系统覆盖的颜色来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
