禁用状态需同步处理颜色、对比度、光标、语义和行为；必须用高权重选择器或!important声明color/background/border；确保文字对比度≥4.5:1；cursor需配合pointer-events:none；原生disabled属性不可替代；键盘聚焦与屏幕阅读器支持缺一不可。
禁用状态样式不明显，不是颜色调浅了或透明度设低了就能解决的问题——它本质是视觉降级与可访问性保障的冲突，必须同步处理颜色、对比度、光标、语义和行为。
button:disabled选择器权重不够，样式被Bootstrap覆盖
Bootstrap 5 默认用 button:disabled 和 .btn:disabled 这类高特异性选择器控制禁用态，你写 .btn-primary:disabled 可能仍被 button.btn.btn-primary:disabled 压制。
- 改用更重的选择器，例如：
button.btn.btn-primary:disabled或input[type="submit"].btn:disabled - 加
!important是合理手段，不是偷懒——color: #6c757d !important;比空谈“提高 specificity”更快落地 - 别只改
color，background-color和border-color也要显式声明，否则可能残留渐变或亮边 - 检查开发者工具的 “Computed” 面板，看哪条规则被划掉；若
opacity: .65生效但文字看不清，说明问题不在透明度，而在颜色对比度
禁用按钮文字颜色对比度不达标，色弱用户看不见
Bootstrap 默认的禁用文字色（如 #6c757d）在浅灰背景上对比度常低于 WCAG 要求的 4.5:1，尤其在高亮度屏幕或色觉障碍场景下几乎不可读。
- 用工具验证：把禁用按钮的背景色和文字色输入 WebAIM 对比度检测器，确认 ≥ 4.5
- 推荐安全值：背景为
#e9ecef时，文字用#495057（非#adb5bd）；若背景更浅，文字需更深，如#343a40 - 避免用
rgba(0,0,0,.5)这类依赖父背景的写法——它在深色模式或自定义主题下会彻底失效 - 不要仅靠灰度判断“已禁用”，叠加
text-decoration: line-through或小图标（如bi-ban）可辅助识别
光标仍是箭头，不是 not-allowed
写了 cursor: not-allowed !important 却还是默认箭头？这不是 CSS 失效，而是浏览器对原生 disabled 属性做了策略性压制——Chrome/Firefox 会直接丢弃该声明。
- 必须搭配
pointer-events: none使用，二者缺一不可：button.btn:disabled { pointer-events: none; cursor: not-allowed !important; } - 移动端 WebView（尤其旧版安卓）对
:disabled的cursor支持极差，建议加行内样式兜底：style="cursor:not-allowed" - 如果用了 React/Vue 动态绑定
disabled={isDisabled}，注意某些框架更新时机可能导致样式未及时应用；稳妥做法是双控：disabled={isDisabled}+className={isDisabled ? 'disabled' : ''}，再配.btn.disabled规则 - 别对
<a class="btn"></a>加disabled属性——它不支持:disabled伪类，必须用.disabled类 +tabindex="-1"+event.preventDefault()
禁用后仍可键盘聚焦或触发 Enter，交互没真正关闭
视觉变灰 ≠ 功能禁用。仅靠 CSS 样式或 pointer-events: none 无法阻止键盘操作，这是最危险的盲区。
- 原生
button必须用disabled属性，不能只靠类名：<button class="btn" disabled></button>✅，<button class="btn disabled"></button>❌ - JS 动态控制时，三件事必须同步：
btn.disabled = true、btn.setAttribute('aria-disabled', 'true')、btn.setAttribute('tabindex', '-1')（后者防意外聚焦） - 表单提交前务必检查：
if (!submitBtn.hasAttribute('disabled')) { submit() }，别依赖submitBtn.classList.contains('disabled') - 禁用状态下，子元素（如图标
<i class="bi bi-x"></i>）仍可能响应点击，除非父级明确设了pointer-events: none且浏览器支持
真正难搞的不是调一个颜色，而是让“禁用”这个状态在鼠标、键盘、屏幕阅读器、高对比度模式、移动端、旧浏览器里都一致生效——每漏一项，就多一个用户卡在流程里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
