disabled按钮灰色样式常不生效因浏览器ua样式强干预，应使用button[disabled]代替button:disabled并设border-color、cursor等；灰度需满足wcag对比度≥4.5:1，推荐背景#eaeaea、文字#666；动态禁用时确保布尔属性绑定并处理:focus:disabled组合态。
disabled按钮的灰色样式为什么经常不生效
因为浏览器对 :disabled 的默认样式有强干预，尤其是原生 <button></button> 在不同系统（macOS/Windows）下会自动覆盖 background 和 color，即使你写了 CSS 也可能被忽略。更麻烦的是，某些旧版 Safari 甚至不触发 :disabled 伪类样式更新，除非手动触发重绘。
必须用 !important 吗？怎么安全覆盖
不是必须，但得绕过浏览器默认样式的层叠权重。关键点是：用属性选择器比伪类更优先，且要确保选择器足够具体。
- 写成
button[disabled]而非button:disabled—— 前者权重更高，兼容性更好 - 避免只写
button:disabled { background: #ccc; }，它常被浏览器 UA 样式压制 - 加上
border-color和cursor一起设，否则边框和鼠标图标可能还是默认色/样式
示例：
button[disabled] {
background: #e0e0e0 !important;
color: #999 !important;
border-color: #d0d0d0;
cursor: not-allowed;
}
灰度值选多少才“看起来真禁用”
不能只看明度，还要考虑对比度是否满足可访问性（WCAG AA 级要求文本与背景对比度 ≥ 4.5:1）。纯 #ccc 在白色背景上对比度只有 ~2.8:1，用户实际很难看清文字。
立即学习“前端免费学习笔记（深入）”；
- 推荐背景用
#f5f5f5或#eaeaea，文字用#777或#666 - 如果按钮底色本身不是白色（比如深色主题），禁用色就得反向调整，不能硬套同一套灰值
- 用
opacity: 0.6是偷懒做法 —— 它会让整个按钮（包括子元素）变透明，且无法通过屏幕阅读器正确识别状态
React/Vue 中动态 disabled 导致样式丢失怎么办
框架里常见问题：初始渲染时没加 disabled 属性，后续 JS 动态添加后，[disabled] 选择器能匹配，但部分浏览器（特别是旧 Edge）不会立即重绘样式，尤其当用了 CSS-in-JS 或 scoped style。
- 确保属性是布尔属性，写成
disabled={isDisabled}，而不是disabled={isDisabled ? 'disabled' : null} - 在 Vue 中若用
v-bind:disabled，确认绑定的是布尔值而非字符串 - 极端情况可加一句
el.style.opacity = el.hasAttribute('disabled') ? '0.6' : '1'强制触发重绘（仅调试用，不推荐上线）
:focus 和 :disabled 同时存在，而你的 CSS 没覆盖这个组合态。 
