button加disabled没变灰，根本原因是元素非原生表单控件（如div/span）或disabled属性未真实透传至button/input等合法标签；必须确保DOM中存在disabled属性，且使用button:disabled显式覆盖样式，同时设置cursor: not-allowed和opacity/filter等视觉反馈。
button 元素加了 disabled 却没变灰？检查是否用了非表单语义标签
按钮没变灰，大概率不是 CSS 问题，而是元素本身不支持 disabled 属性。只有原生表单控件（<button>、<input type="button/submit/reset">、<input type="checkbox/radio"> 等）才识别并响应 disabled。用 <div> 或 <span> 包裹再加 disabled 属性，浏览器完全忽略——它压根不是表单控件。
常见错误场景：
- Vue/React 里写了
<MyButton disabled>，但组件内部没把disabled透传到真实<button>上 - 用
<a href="#">模拟按钮，加disabled属性无效 - 自定义组件返回的是
<div role="button">，disabled不触发原生禁用样式
:disabled 伪类为什么没生效？确认 DOM 中 disabled 属性是否真实存在
:disabled 是浏览器原生伪类，只匹配 DOM 中**真实存在**的 disabled 属性，而不是 JS 变量或 class 名。哪怕你写了 class="disabled" 或 data-disabled="true"，button:disabled 也完全不匹配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools，选中按钮，看 Elements 面板里有没有
disabled这个属性（不是disabled="false"，也不是disabled=""—— 后两者都算“存在”，都会禁用） - React 中别只写
disabled={isDisabled}，要确保它最终渲染为<button disabled>或<button>（即属性被完全移除） - Vue 中用
:disabled="isDisabled"，而不是v-bind:class="{disabled: isDisabled}"—— 后者只改 class，不触发改伪类
JS 动态控制 button.disabled = true/false 的坑点
最常翻车的是布尔值逻辑反了：button.disabled = true 是禁用，false 是启用。不是“true 表示可用”。很多代码写成 if (valid) { btn.disabled = true; }，结果一满足条件按钮立刻灰掉点不了。
安全写法：
- 直接赋值表达式：
btn.disabled = input.value.trim() === '';（空则禁用） - 禁用后记得重置：表单提交成功或校验通过时，必须显式设为
false，否则按钮一直灰着 - 别用
btn.setAttribute('disabled', 'true')后又想用removeAttribute('disabled')来启用——虽然可行，但不如直接操作.disabled属性来得干净可靠
禁用按钮的灰度效果能自定义吗？别依赖浏览器默认
浏览器对 disabled 按钮的灰化只是默认样式，不同浏览器、不同 OS 下差异明显（比如 macOS Safari 的灰度比 Chrome 浅得多）。如果设计要求统一灰度、透明度或滤镜效果，不能只靠原生表现。
推荐做法：
- 用
button:disabled覆盖默认样式，例如：button:disabled { opacity: 0.6; filter: grayscale(0.7); cursor: not-allowed; } - 避免仅靠
opacity实现置灰——它会让文字和图标一起发虚，可读性差；搭配filter: grayscale()更接近设计稿 - 注意：某些旧版 Edge 对
filter支持不好，若需兼容，优先用opacity+color+background-color组合降级
disabled 元素的值根本不会发出去），以及屏幕阅读器播报（应读作“已禁用”）。这两点漏掉，就不是真禁用。 
