禁用状态下 .form-control 文本和背景改不掉，因 Bootstrap 5 用高优先级 .form-control:disabled 规则控制（color: #6c757d, background-color: #e9ecef），需用相同选择器加 !important 覆盖。

禁用状态下的 .form-control 文本和背景为什么改不掉？

因为 bootstrap 的禁用样式优先级高，且依赖 :disabled 伪类 + .disabled 类双重控制，直接覆盖 color 或 background-color 往往无效——特别是当你只改了普通选择器，没匹配到它的实际生效规则。

• 默认禁用文本色来自 .form-control:disabled 的 color: #6c757d（Bootstrap 5），不是继承父级
• 背景色由 .form-control:disabled 的 background-color: #e9ecef 控制，而非 opacity
• 如果用了 fieldset[disabled] 包裹，内部所有表单控件会继承禁用态，此时需额外处理 fieldset:disabled 下的子元素

覆盖 .form-control:disabled 的正确写法

必须用相同或更高优先级的选择器，且带上 :disabled 伪类。别漏掉 !important——Bootstrap 的 CSS 是从 dist/css/bootstrap.css 直接加载的，你自定义样式通常后载入但优先级不够。

• 推荐写法：

  .form-control:disabled {
    color: #495057 !important;
    background-color: #f8f9fa !important;
  }

• 如果只针对特定输入类型（如 select），用 select.form-control:disabled 更精准
• 避免写成 .form-control.disabled——Bootstrap 5 已弃用该类，禁用态靠原生 :disabled 属性驱动

按钮禁用态（.btn:disabled）要单独处理

.btn 和 .form-control 的禁用规则完全独立，共用同一套逻辑但选择器不同。不改按钮，只改输入框，按钮颜色照样不变。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 按钮禁用文本/背景由 .btn:disabled 控制，例如：

  .btn:disabled {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
  }

• 若使用 btn-outline-* 类，还需覆盖 border-color 和 color，否则文字可能看不清
• 注意：Bootstrap 5 中 .btn:disabled 默认带 pointer-events: none，不影响颜色，但不可点击是确定的

全局禁用色统一管理的隐患

如果项目里大量用到禁用态，想通过变量统一改（比如 Sass 中重定义 $gray-400），得小心——这个变量不只用于禁用态，还影响边框、分割线、占位符等。一改全乱。

• 最稳的方式仍是局部覆盖 :disabled 选择器，不碰底层变量
• 如果用 Sass，可提取为 mixin：

  @mixin disabled-override($text, $bg) {
    &:disabled {
      color: $text !important;
      background-color: $bg !important;
    }
  }
  .form-control { @include disabled-override(#495057, #f8f9fa); }

• 别忘了检查深色模式（data-bs-theme="dark"）下是否需要额外适配，Bootstrap 5.3+ 的暗色模式会切换禁用色，但你的覆盖规则可能不自动生效

改禁用态颜色这事，表面是调两个 CSS 属性，实际卡点全在选择器优先级、伪类匹配、以及组件间规则隔离上。最容易被忽略的是：同一个页面里 input、select、button、textarea 的禁用样式其实是四套独立规则，得一个个对齐着改。