单选按钮文字颜色需设在label等包裹标签上而非input，因input是替换元素不渲染文本；推荐用类选择器控制，结合相邻兄弟选择器+或通用兄弟选择器~，并适配暗色模式与高对比度模式。
单选按钮文字颜色不能直接设在 <input type="radio"> 上
因为 <input> 是替换元素，本身不渲染文本内容，color 属性对它无效。你看到的“文字”其实是紧邻的 <label> 或其他包裹文本的标签，颜色必须作用在那些元素上。
常见翻车点：写 <input type="radio" style="color: red;"><label>选项</label>，结果文字完全不变色——不是 CSS 写错了，是目标选错了。
- 检查开发者工具的 Computed 面板，确认
color值是否出现在<label>或其父容器上 - 如果
<label>是空的，只靠for关联，那文字实际在别处（比如<span>），得定位到那个节点 - 避免给
<input>加color，纯属浪费调试时间
label 文字变色最稳的写法是类选择器 + 外部 CSS
用 class 控制比内联样式可靠得多，尤其当按钮组需要统一主题、响应状态（如禁用、错误）时。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="radio-group"> <input id="opt1" name="theme" type="radio" value="light"> <label for="opt1">浅色模式</label> </div> <div class="radio-group"> <input id="opt2" name="theme" type="radio" value="dark"> <label for="opt2">深色模式</label> </div>
CSS 推荐写法：
.radio-group label {
color: #333;
}
.radio-group input:checked + label {
color: #1976d2;
}
.radio-group input:disabled + label {
color: #999;
}-
+是相邻兄弟选择器，要求<input>和<label>必须紧挨着，中间不能有换行符或空格（HTML 中的空白符会被解析为文本节点，破坏选择器） - 如果结构里插了
<span>或其他元素，改用~（通用兄弟选择器），但性能略低、可读性稍差 - 别用
!important压颜色——后期加 hover 或 focus 状态时会打架
动态改色时优先操作 className 而非 style.color
JS 直接改 label.style.color 看似快，但容易和 CSS 规则冲突，且无法批量响应状态变化。
更可控的做法：
const labels = document.querySelectorAll('.radio-group label');
labels.forEach(label => {
label.addEventListener('click', () => {
// 清掉所有已选中样式
labels.forEach(l => l.classList.remove('selected'));
// 给当前 label 加类
label.classList.add('selected');
});
});CSS 配套：
.radio-group label.selected {
color: #d32f2f;
font-weight: 600;
}- 用类名切换，语义清晰，方便加过渡动画（
transition: color 0.2s） - 如果用了框架（React/Vue），就别手动操作 DOM，用响应式数据驱动 class 切换
- 注意：
click事件要绑在label上，而不是input——否则点击 label 区域不会触发
暗色模式下文字发灰？别硬写死颜色值
纯黑 #000 在 OLED 屏或系统暗色模式下对比度崩坏，纯白 #fff 在强光下又看不清。直接写死颜色值会让按钮组在不同系统设置下失效。
推荐兜底方案：
.radio-group label {
color: #333; /* 默认深灰 */
}
@media (prefers-color-scheme: dark) {
.radio-group label {
color: #e0e0e0; /* 暗色模式用浅灰 */
}
.radio-group input:checked + label {
color: #bb8f00;
}
}- 别依赖
currentColor自动适配——它只是继承当前color值，不会感知系统主题切换 - 如果项目已用 CSS 变量（如
--text-primary），把颜色抽成变量，再在媒体查询里重定义，维护成本更低 - 高对比度模式（
forced-colors: active）下，浏览器可能强制覆盖颜色，关键提示建议加图标或文字标识，不只靠色差
