button:disabled和input:disabled样式不生效的根本原因是dom上缺失真实disabled属性或元素非原生可禁用类型（仅button、input、select、textarea支持），且需同时使用:disabled和[disabled]选择器覆盖js动态设置与html静态属性两种场景。
button:disabled 和 input:disabled 为什么样式不生效
根本原因就两个：DOM 上没真实 disabled 属性，或者元素不是原生可禁用类型。浏览器只对 <button></button>、<input>、<select></select>、<textarea></textarea> 这几类标签响应 :disabled；给 <div> 或自定义组件加 <code>disabled 属性，CSS 完全无视。
常见错误场景：
- React 中写了
disabled={true}，但没透传到内部<button></button>标签上 → DOM 里没有disabled属性 - JS 只执行
el.disabled = true，没调用el.toggleAttribute('disabled', true)→:disabled匹配失败 - 服务端渲染（SSR）输出的 HTML 含
disabled属性，但客户端 JS 没同步状态 →[disabled]生效，:disabled失效
必须同时写 button[disabled] 和 button:disabled
二者覆盖场景不同，缺一不可：
-
button:disabled响应 JS 直接设置el.disabled = true的状态变更（如 React/Vue 的 props 更新） -
button[disabled]匹配 HTML 中真实存在的disabled属性（SSR、手动生成、setAttribute） - 只写一个，必然在某些环境漏样式，尤其 SSR + CSR 混合渲染时
推荐写法：
button:disabled, button[disabled],
input:disabled, input[disabled],
select:disabled, select[disabled],
textarea:disabled, textarea[disabled] {
background-color: #f0f0f0;
color: #999;
border-color: #ddd;
cursor: not-allowed;
opacity: 1; /* 避免用 opacity: 0.5 —— 可能违反 WCAG 对比度要求 */
}
:disabled:focus 不可靠，别依赖它
禁用元素默认无法获得焦点，所以 button:disabled:focus 实际永远不会触发。但容易出问题的是：按钮刚被禁用时，焦点还没移走，旧的 :focus 样式残留（尤其 Safari 和旧 Chrome）。
- 显式调用
element.blur()可清除残留焦点 - 更稳妥的做法是把
:focus和:disabled样式分开定义，避免叠加冲突 - 不要在
:disabled规则里写outline: none来“修复”，这会破坏键盘可访问性
input[type="checkbox"]:disabled 等特殊控件要单独处理
不同表单控件对同一套 CSS 响应不一致：
-
input[type="checkbox"]:disabled的accent-color在多数浏览器失效，得用filter: grayscale(50%) -
input[type="file"]的文件名区域是伪元素::file-selector-button，需额外写input:disabled::file-selector-button -
input[type="date"]在 Safari 禁用后仍显示下拉箭头，需用appearance: none+ 自定义图标遮盖 -
fieldset:disabled不会让子元素自动匹配:disabled，必须显式写fieldset:disabled input
真正麻烦的点从来不在怎么写样式，而在于你是否确认过：DOM 属性真存在、框架透传到位、无障碍属性同步、事件拦截写全、浏览器兼容兜底——漏掉任意一环，用户就会遇到“看着不能点，结果点了有反应”这种事。
