根本原因是元素非原生可禁用类型或dom无真实disabled属性；:disabled仅匹配button、input等原生表单控件，且需属性真实透传，否则应改用[disabled]属性选择器或类名控制。
button:disabled 和 input:disabled 为什么样式不生效
根本原因就两个：元素不是原生可禁用类型，或者 DOM 上没真实存在 disabled 属性。比如你写了 div:disabled，浏览器直接忽略——:disabled 只认 button、input、select、textarea 这几类。更常见的是 React/Vue 组件里传了 disabled={true}，但没透传到内部原生标签上，导致 DOM 里压根没有 disabled 属性，:disabled 自然不匹配。
[disabled] 属性选择器比 :disabled 更可靠
它不挑元素类型，只要 HTML 属性存在就生效，连 <my-button disabled></my-button> 都能捕获。兼容性也更好（IE8+ 支持），且能响应 JS 动态设置 el.setAttribute('disabled', '') 的操作。
-
button[disabled], input[disabled], .custom-btn[disabled]是推荐写法 - JS 中别只改
el.disabled = true，它不会自动加属性，得配el.toggleAttribute('disabled', true) - React 中确保
disabled最终落到<button></button>上，而不是只挂在组件 props 里
禁用样式必须同时控制视觉、行为和语义
只加 filter: grayscale(1) 或 opacity: 0.5 是半残废状态：按钮还能被键盘聚焦、屏幕阅读器仍报“可点击”、鼠标指针没变、甚至可能意外触发事件。
- 必加
cursor: not-allowed，明确提示不可交互 - 必须设
aria-disabled="true"（非表单元素）或真实disabled属性（表单元素） - 在事件处理函数开头加
if (el.disabled) return，别依赖样式挡逻辑 - Safari 对
filter: grayscale()渲染异常，建议 fallback 到opacity + background-color + color
不同表单控件的 :disabled 行为差异
不是所有 input 类型对同一套 CSS 响应一致。比如：
-
input[type="date"]在 Safari 禁用后仍显示下拉箭头 -
input[type="range"]在 Firefox 下滑块可能消失，导致样式错位 -
input[type="checkbox"]禁用时accent-color失效，得用filter: grayscale(50%)统一灰度 -
input[type="file"]的文件名区域是伪元素::file-selector-button，需单独写样式
真正麻烦的点从来不在怎么写样式，而在于你是否确认过：DOM 属性真存在、框架透传到位、无障碍属性同步、事件拦截写全、浏览器兼容兜底——漏掉任意一环，用户就会遇到“看着不能点，结果点了有反应”这种事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
