bootstrap 5 的 :disabled 样式由高优先级原生选择器（如 button:disabled）控制，需用相同或更高权重选择器覆盖，js 必须操作 disabled 属性而非 class 才生效。
Bootstrap 5 的 :disabled 样式由高优先级原生选择器控制
不是你写得不对，是 Bootstrap 5 的 CSS 规则权重太高。它用 button:disabled、.form-control:disabled 这类带标签名+伪类的组合直接定义颜色、透明度和光标，且从 dist/css/bootstrap.css 加载——你自定义样式哪怕后加载，也常被覆盖。常见现象：改了 color 没反应，打开开发者工具一看，你的声明被划掉，生效的是 Bootstrap 那条 color: #6c757d。
必须用相同或更高优先级的选择器匹配，例如：
-
button.btn-primary:disabled比.btn-primary:disabled更准、权重更高 -
input.form-control:disabled比.form-control:disabled更稳（尤其当 input 套了多个 class） - 多数情况下仍需加
!important，这不是“不规范”，而是对抗框架默认样式的现实手段
不同控件类型禁用逻辑完全独立，不能一招通吃
button、input[type="button"]、select、fieldset 各自走不同规则，彼此不继承也不共享样式。比如你只改了 button:disabled，select.form-control:disabled 依然灰着旧色；而 fieldset[disabled] 下的所有子控件会强制进入禁用态，但它们自身 DOM 并无 disabled 属性，所以 input:disabled 规则根本不会命中——得单独写 fieldset[disabled] input 才行。
容易踩的坑：
- 以为改了
.btn:disabled就能覆盖所有按钮，结果input[type="submit"]完全没变 - 在
fieldset里调试textarea:disabled失败，却忘了它此时实际靠的是父级fieldset的禁用传导 - 用
a.disabled模拟按钮时，:disabled根本不生效（<a></a>不支持该伪类）
JS 动态控制时属性与样式脱节，导致样式“卡住”
用 el.classList.add('disabled') 或 el.style.opacity = '0.4' 看似让按钮变灰，但 Bootstrap 5 完全不响应这些操作——它只监听原生 disabled 属性是否存在。JS 中正确做法只有：el.disabled = true 或 el.setAttribute('disabled', '')。否则会出现：按钮视觉上没变、仍可点击、键盘可触发、表单提交时值还在。
更隐蔽的问题：
- Vue/React 中写
:disabled="isSubmitting ? 'disabled' : null"，传的是字符串而非布尔值，:disabled伪类不匹配 - 用
el.disabled = true后，某些旧版 Safari 不触发重绘，得补el.offsetHeight强制刷新 - 异步请求失败后忘记在
finally里调el.removeAttribute('disabled')，按钮就永远锁死
全局覆盖风险极高，尤其影响可访问性
有人想“统一改所有禁用文字为 #999”，于是写 :disabled, .disabled { color: #999 !important; }。这会导致：
- Windows 高对比模式下文字彻底消失（系统依赖原生禁用色做反色适配）
- 屏幕阅读器误判状态，因为部分辅助技术通过
disabled属性 + 默认样式组合识别禁用语义 - WCAG 对比度不达标：
#999在白色背景上对比度仅 ~3.7:1，低于要求的 4.5:1
真正安全的做法是按组件类型单独处理：只动 button:disabled 和 select:disabled，放过 fieldset 或自定义组件；禁用色值别硬写死，用 rgba() 分别控制文字、背景、边框的 alpha，保色相、控可读性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
