input:disabled字体颜色改不了是因为浏览器ua样式强制设为系统灰并叠加opacity，默认color不继承；需同时设置color、opacity:1和-webkit-text-fill-color才能生效。
input:disabled 为什么改不了字体颜色
浏览器对 input:disabled 有强默认样式压制，尤其在 Chrome 和 Safari 中：它会强制把 color 设为系统灰（常是 #a9a9a9），哪怕你写了 color: #333 也不生效。根本原因不是 CSS 写错，而是 UA 样式表里 input:disabled 的 color 权重更高，且部分属性（如 color）不继承。
实操建议：
- 必须显式声明
color+opacity: 1—— 很多 UA 默认给 disabled input 加了opacity: 0.4，导致你设的深色也被“冲淡” - 避免只写
input[disabled]：它无法匹配 JS 动态设置的el.disabled = true，而input:disabled可以 - 不要依赖
filter: grayscale()单独调色：它不改变实际 color 值，屏幕阅读器和高对比度模式下可能失效
button:disabled 文字变灰但背景没变？重置这五项
按钮禁用后文字灰、背景却还是亮色，是因为浏览器只压 color 和 opacity，但放任 background-color 继承或保持原值。你得手动“接管”全部视觉通道。
必须写的最小集合：
-
color: #666（别用太浅的灰，否则高对比度模式下不可读） -
background-color: #f0f0f0（与文字灰度协调） -
border-color: #ccc（避免边框突兀） -
cursor: not-allowed（光标提示比颜色更重要） -
opacity: 1（防某些 UA 暗中加透明）
示例：
button:disabled {
color: #666;
background-color: #f0f0f0;
border-color: #ccc;
cursor: not-allowed;
opacity: 1;
}
select 或 option 禁用时字体颜色不统一？注意层级差异
select:disabled 和 option:disabled 是两套逻辑：select:disabled 控制整个下拉框外观；option:disabled 只影响单个选项，且多数浏览器不支持给 option 设置 color（Safari 完全忽略，Chrome 仅部分生效）。
能稳定生效的做法：
- 对整个
select禁用：用select:disabled { color: #777; background: #fafafa; } - 对单个
option禁用：别指望改字体色，改用opacity: 0.6+ 灰色背景色（background: #eee），并确保父select未设background覆盖 - 如果需要更精细控制，放弃原生
option:disabled，改用自定义下拉（div + ul + js），完全掌控每个 item 的 class 和样式
disabled 状态下字体颜色生效了，但键盘焦点还存在？
只调颜色是半残废状态——用户按 Tab 还能聚焦到禁用控件，屏幕阅读器仍报“可编辑”，这是 WCAG 2.1 明确不合规的。
真正闭环的禁用，三者必须同步：
-
DOM 层：表单控件必须设
disabled属性（不是disabled="false"，也不是 class） -
CSS 层：用
:disabled控制样式，同时加outline: none（若需移除焦点框）或确保焦点框颜色与禁用态协调 -
行为层：在事件 handler 开头加
if (e.target.disabled) return;，防止 JS 逻辑误触发
特别注意：React/Vue 中，disabled={false} 不会从 DOM 移除 disabled 属性，得用条件渲染或 removeAttribute('disabled') 才行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
