直接修改 CSS 即可，但需注意选择器优先级、控件类型差异及可访问性：按钮用 .btn-type.disabled，原生 input 用 :disabled，避免全局覆盖破坏语义与 WCAG 合规。
直接改 .disabled 类的 CSS 就行，但得注意优先级和作用范围
bootstrap 的 .disabled 类本身只做了基础禁用处理（比如降低 opacity、移除 pointer-events），字体颜色没被强制锁定——它只是继承了按钮默认的禁用态颜色（比如 .btn-primary.disabled 会走 btn-primary 的禁用规则）。所以你完全可以覆盖它，但得写对选择器。
常见错误是只写 .disabled { color: #666; }，结果无效。因为 Bootstrap 的原生规则像 .btn-primary:disabled, .btn-primary.disabled 权重更高，你的样式会被盖掉。
- ✅ 正确做法：带上按钮类型，例如
.btn-primary.disabled { color: #555 !important; } - ✅ 更稳妥：用更具体的选择器，比如
button.btn.btn-primary.disabled或加!important（仅当必要） - ⚠️ 注意：如果按钮是
<a></a>标签模拟的，要用a.disabled，不是button.disabled - ⚠️ Bootstrap 5 开始，
.disabled不再自动加pointer-events: none到<a></a>，需手动补上
修改 input[type="button"] 或 input[type="submit"] 的禁用样式
这类原生表单控件不走 .disabled 类，而是靠 HTML 的 disabled 属性触发浏览器默认禁用样式。Bootstrap 并不会接管它们的禁用态外观，除非你主动写 CSS。
- ✅ 必须写属性选择器：
input[type="button"]:disabled, input[type="submit"]:disabled - ✅ 推荐同时覆盖背景、边框、文字色、cursor：
color: #777; background-color: #f8f9fa; border-color: #e9ecef; cursor: not-allowed; - ⚠️ 避免只改
color：有些浏览器（如旧版 Safari）禁用时会强制灰化文字，光调颜色可能没效果 - ? 小技巧：用
filter: grayscale(20%) brightness(1.1);微调视觉一致性（慎用，影响可访问性）
全局统一禁用文字色？小心破坏语义和可访问性
有人想“一劳永逸”地让所有禁用元素文字变灰，于是写 :disabled, .disabled { color: #999 !important; }。这看似省事，实际埋雷。
- ❌ 破坏高对比度模式：Windows / macOS 的系统级高对比主题依赖原生禁用样式，粗暴覆盖会让文字看不见
- ❌ 影响屏幕阅读器行为：部分辅助技术通过
disabled属性判断是否跳过元素，样式乱改可能干扰逻辑 - ✅ 更安全的做法：按组件类型单独定制，比如只动
.btn和select，放过fieldset或自定义组件 - ✅ 检查 WCAG：禁用态文字与背景对比度至少要 4.5:1（#999 在 #fff 上只有 ~3.7:1，不够）
React + Bootstrap（如 react-bootstrap）里怎么改？
JSX 中的 disabled 属性会透传给底层 DOM，但如果你用了 disabled={true} 的 Button 组件，它最终渲染的还是带 .disabled 类的 button 元素——所以 CSS 方式依然有效。
- ✅ 在 CSS 文件里写
.btn.btn-primary.disabled { color: #495057; }即可生效 - ✅ 若用 CSS-in-JS（如 styled-components），确保选择器包含
&.disabled后缀 - ⚠️ 别在组件内联 style 改禁用态：
style={{ color: isDisabled ? '#666' : 'inherit' }}不推荐——它绕过了伪类，且无法响应:hover等状态 - ? 提示：react-bootstrap 的
Button会自动加aria-disabled="true"，别手动覆盖这个属性
.disabled 类，必须用 :disabled 伪类——漏掉这点，一半按钮就改不动。
