Bootstrap 4 中禁用输入框样式需用 .form-control:disabled 配合 !important 同步重置 background-color、color、opacity 和 border-color；注意 fieldset[disabled] 的隐式禁用；type="date" 和 type="number" 需单独处理并考虑浏览器差异。
input:disabled 样式被 Bootstrap 4 默认覆盖了
Bootstrap 4 的 .form-control 在禁用状态下自带一套灰阶样式，直接写 input:disabled 很可能无效——不是你写错了，而是它的 CSS 优先级更高、更具体。它实际用的是：.form-control:disabled 和 .form-control[disabled] 这类高特异性选择器，还会叠加 fieldset[disabled] 的全局压制。
必须用 .form-control:disabled 覆盖，且加 !important（谨慎但必要）
想真正生效，得用和 Bootstrap 同级甚至更高的选择器，并显式重置关键属性。仅靠 background-color 不够，因为 Bootstrap 同时设置了 opacity 和 color，三者要同步改：
.form-control:disabled { background-color: #fff !important; }.form-control:disabled { color: #333 !important; }.form-control:disabled { opacity: 1 !important; }- 如果边框也变灰了，补上：
border-color: #ced4da !important;
这里 !important 不是偷懒，而是对抗 Bootstrap 4 源码中大量带 !important 的禁用样式（比如 opacity: .5 !important）。不加，大概率被忽略。
fieldset[disabled] 是隐形杀手，别漏查
即使你把 input 的 disabled 属性移除了，只要它在 fieldset 里，而该 fieldset 带了 disabled 属性，输入框照样“视觉禁用”——但此时 input:disabled 或 .form-control:disabled 根本不匹配，因为你没动 input 自身的属性。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查：选中禁用的输入框 → 看它是否嵌套在
fieldset[disabled]内 - 真有，就得改
fieldset:disabled .form-control，而不是只盯input:disabled - 或者干脆不用
fieldset[disabled]，改用 JS 控制子元素的disabled属性
type="number" 和 type="date" 的禁用样式更顽固
这些原生控件在禁用时，浏览器会强干预渲染，尤其 Safari 和 Firefox 对 background-color 和 color 的处理极不一致。例如 input[type="date"]:disabled 在 Safari 里仍显示下拉箭头，且背景色常被忽略。
- 必须单独加类型限定：
input[type="number"]:disabled、input[type="date"]:disabled - 对
type="date"，建议加appearance: none+ 自定义图标，否则光靠颜色覆盖无效 - 对
type="number"，可尝试强制-webkit-appearance: textfield再设背景
禁用状态的样式不是写一次就完事——它受 HTML 结构、控件类型、父级约束、浏览器实现四重影响，漏掉任何一层，灰色就还在那儿。
