改不了是因为bootstrap 5用input:disabled等高权重原生选择器控制禁用样式，需用input.form-control:disabled等更高权选择器或!important覆盖，且必须同步设置color、background-color、border-color、pointer-events:none和cursor:not-allowed，并确保js操作disabled属性而非class。
直接改 .form-control:disabled 很可能没反应——Bootstrap 5 的禁用样式由高权重原生选择器（如 input:disabled、select:disabled）控制，你的规则常被划掉。
为什么改了 .form-control:disabled 还是灰不下去？
Bootstrap 5 默认用 input:disabled、select:disabled、textarea:disabled 和 fieldset[disabled] input 等带标签名的选择器定义禁用态，权重远高于你写的 .form-control:disabled。开发者工具里一看，你的声明被划掉，生效的是 Bootstrap 自己那条 color: #6c757d 或 background-color: #e9ecef。
- 必须提高选择器权重：用
input.form-control:disabled或select.form-control:disabled替代泛写的.form-control:disabled -
!important不是偷懒，是必要手段——color: #495057 !important比纠结 specificity 更快见效 - 别只改
color：background-color、border-color、opacity都得显式声明，否则残留渐变或亮边会破坏一致性
fieldset[disabled] 下的控件样式怎么单独调？
fieldset[disabled] 是唯一能批量禁用子控件的方式，但它不给子元素加 disabled 属性，所以 input:disabled 规则根本不会命中。你看到的“变灰”其实是 fieldset[disabled] 自身的样式传导，子控件实际没被选中。
- 必须单独写
fieldset[disabled] input、fieldset[disabled] select、fieldset[disabled] textarea - 如果用了自定义类（比如
.my-input），得写成fieldset[disabled] .my-input，不能指望它继承父级禁用样式 - 注意
legend里的控件不受影响——哪怕fieldset被禁用，<legend><input></legend>依然可点可输
禁用状态的对比度和光标为什么还是不对？
文字看不清、鼠标仍是箭头，不是 CSS 写错了，而是两个独立问题叠加：对比度不足 + 浏览器对原生 disabled 的 cursor 压制。
- 用 WebAIM 对比度检测器验证：背景
#e9ecef+ 文字#6c757d只有 ~3.2:1，低于 WCAG 要求的 4.5:1；换成#495057就达标 -
cursor: not-allowed单独写无效，必须配pointer-events: none——input:disabled { pointer-events: none; cursor: not-allowed !important; } - 移动端 WebView（尤其旧安卓）对
:disabled的cursor支持极差，建议加行内样式兜底：style="cursor:not-allowed"
JS 动态启用/禁用时样式“卡住”怎么办？
用 el.classList.add('disabled') 或 el.style.opacity = '0.4' 看似变灰，但 Bootstrap 5 完全不响应——它只认原生 disabled 属性是否存在。
- 正确写法只有：
el.disabled = true（设为布尔值，不是字符串）或el.setAttribute('disabled', '') - Vue/React 中避免
:disabled="isSubmitting ? 'disabled' : null"，传字符串会导致伪类不匹配；应写成:disabled="isSubmitting" - 异步操作后务必在
finally里调el.removeAttribute('disabled')，否则按钮永久锁死 - 旧版 Safari 可能不重绘，补一句
el.offsetHeight强制触发
最麻烦的点不在怎么写 CSS，而在不同控件类型（input、select、textarea、fieldset）的禁用逻辑完全隔离，且原生行为和框架样式之间存在不可忽略的浏览器策略差异——比如 Chrome 对 disabled 元素的 cursor 直接丢弃，而 Safari 又可能漏触发重绘。绕开这些坑，比写出漂亮样式更花时间。
