:disabled伪类常失效，因仅匹配button、input等原生可禁用元素且需dom真实存在disabled属性；应改用[disabled]属性选择器，并确保透传、同步语义与行为。
:disabled 伪类本身无法真正“统一”禁用样式，它只对特定元素生效且极易失效；要稳定控制外观，必须用 [disabled] 属性选择器替代，并确保 DOM 上真实存在该属性。
为什么 :disabled 常常不生效
根本原因就两个：目标元素不是原生可禁用类型，或者 HTML 中没真实写入 disabled 属性。比如 div:disabled 浏览器直接忽略——:disabled 只认 button、input、select、textarea 和 fieldset 这几类。更常见的是 React/Vue 组件里传了 disabled={true}，但没透传到内部原生标签上，DOM 里压根没有 disabled 属性，:disabled 自然不匹配。
另外，fieldset[disabled] 会递归禁用子元素，但子元素自身并不带 disabled 属性，所以你写的 input:disabled 在这种场景下完全不会触发。
用 [disabled] 替代 :disabled 更可靠
[disabled] 不挑元素类型，只要 HTML 属性存在就生效，兼容性更好（IE8+ 支持），还能响应 JS 动态设置 el.setAttribute('disabled', '') 的操作。
- 推荐写法：
button[disabled]、input[disabled]、select[disabled]、textarea[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，这是跨浏览器最稳定的禁用提示 - 务必重置
opacity: 1，避免继承父级 opacity 导致文字过淡或无法选中（Safari 尤其敏感） - 事件处理函数开头要加逻辑判断，别依赖样式挡逻辑
- 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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
