必须显式声明 background-color，因浏览器对 input 禁用态默认背景色不统一（chrome 浅灰、firefox 更暗、safari 可能高亮），仅依赖 ua 样式不可控；input:disabled 伪类才能匹配 js 动态禁用状态，且需配合 color 和 opacity: 1 确保文字清晰可读，避免被默认透明度干扰。
input:disabled 选择器必须显式声明 background-color
浏览器对 input 禁用态的默认背景色不统一：Chrome 常用浅灰（#f0f0f0），Firefox 可能更暗，Safari 甚至保留部分高亮。仅靠原生禁用不会自动“变灰”，你看到的灰色往往来自 UA 样式，但不可控、不可靠。
实操建议：
- 必须用
input:disabled伪类覆盖，不能只写input[disabled]（后者不匹配 JS 动态设置的禁用状态） - 显式设置
background-color，避免依赖继承或透明度叠加 - 禁用态下
opacity默认被设为约 0.3～0.5（各浏览器不同），若同时设opacity和background-color，可能造成颜色偏差，建议优先控制background-color+color，再按需微调opacity - 深色主题下硬编码
#f0f0f0会违和，推荐用 CSS 变量：background-color: var(--input-disabled-bg, #f5f5f5)
为什么加了 disabled 属性但背景还是白色？
常见错误是只写了 input.disabled { background-color: #f5f5f5; } 这类 class 控制，但没用原生 disabled 属性——:disabled 伪类根本不会触发。或者用了 React/Vue 却忘了把 disabled 绑定到原生标签上（如 Vue 写成 v-bind:class="{disabled: isDisabled}" 而非 :disabled="isDisabled"）。
检查方法：
- 打开 DevTools，选中 input 元素，看
Properties面板里disabled是否为true（不是看 Attributes 里有没有disabled属性） - 在 Styles 面板搜索
:disabled规则是否被应用，有没有被更高优先级规则覆盖 - 确认没有其他样式（比如
input[readonly]或通用重置）意外覆盖了background-color
禁用 input 要显示黑色文字但保持灰色背景？
默认禁用时文字变灰，是因为浏览器同时降低了 opacity 并设置了浅色 color。若设计要求文字清晰可读（如表单预填只读字段），得打破默认逻辑。
关键操作：
- 强制重置
color，例如color: #000;或color: var(--text-primary); - 必须同步设
opacity: 1;，否则文字仍会被浏览器 UA 样式压暗 - 背景色单独控制，如
background-color: #f1f1f1;（参考 Element UI 的禁用 input 背景） - 慎用
!important；优先提升选择器特异性，比如用input[type="text"]:disabled
示例：
input[type="text"]:disabled {
background-color: #f1f1f1;
color: #000;
opacity: 1;
}
disabled 状态下 background-color 不生效的隐藏原因
最常被忽略的是 border 或 box-shadow 导致视觉干扰：比如禁用态设置了 background-color: #f5f5f5，但边框是深色 border: 1px solid #999，整体看起来像“没变灰”；又或者父容器有 background 透出，掩盖了 input 自身背景。
排查要点：
- 在 DevTools 中临时关闭
border、box-shadow、outline，单独观察背景色是否生效 - 检查是否被
fieldset或label的背景影响（尤其在表单嵌套场景） - 某些 CSS 重置库（如 normalize.css）会清空
input的background-image，但若你自定义了渐变背景，禁用后可能因渲染引擎限制而回退为纯色，造成预期不符
真正可靠的禁用背景控制，永远建立在显式、独立、可验证的 input:disabled 规则之上，而不是依赖浏览器“应该会变灰”的假设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
