怎样在CSS中通过:disabled与:enabled控制按钮状态？-css教程-PHP中文网

必须同时使用 button:disabled 和 button[disabled]，因二者覆盖维度不同：前者响应真实禁用状态，后者匹配属性存在；仅用其一将漏掉 SSR、框架未透传或手动 setAttribute 的场景。

怎样在css中通过:disabled与:enabled控制按钮状态？

button:disabled 和 button[disabled] 必须同时写

只写 button:disabled 会漏掉 SSR 渲染的按钮、React/Vue 中 disabled={true} 但未透传到 DOM 的情况，以及手动用 el.setAttribute('disabled', '') 设置的场景。浏览器只对真实禁用状态响应 :disabled，而 [disabled] 只看属性是否存在——两者覆盖维度不同，缺一不可。

正确写法是并列声明：

button:disabled, button[disabled] {
  color: #999;
  background-color: #f5f5f5;
  border-color: #ddd;
  cursor: not-allowed;
  transition: none;
}

若用了自定义组件（如），还得加 .my-button[disabled] 扩展选择器。

:enabled 不是 :not(:disabled) 的简写

:enabled 是语义化伪类，只匹配原生支持 disabled 属性的元素（、、、），且能正确响应 fieldset[disabled] 下的继承禁用状态；而 :not(:disabled) 是纯逻辑取反，会错误命中

这类非法写法，也会在 fieldset 场景中漏判子元素。

所以启用态样式应明确写：

button:enabled {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

别图省事用 button:not(:disabled) 替代。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

禁用样式不能只靠 opacity 或 filter

opacity: 0.5 会让文字对比度跌破 WCAG 4.5:1（尤其深色模式下不可读）；filter: grayscale(100%) 在旧版 iOS Safari 中常渲染失败或全黑，且两者都不改光标、不阻断键盘焦点、不屏蔽屏幕阅读器播报。

真正可靠的禁用样式需显式控制多个通道：

color 和 background-color 分开设（如 color: #999 + background-color: #f5f5f5）
必须加 cursor: not-allowed（浏览器不会自动加）
加 transition: none 防止悬停动画残留
慎用 pointer-events: none——它会让 Tab 键跳过该元素，破坏键盘导航

非原生元素根本匹配不到 :disabled

:disabled 伪类只对、、、生效。给

 或封装组件加 disabled 属性，CSS 完全无视。两种解法：

优先换回语义化 ，别用 div 模拟按钮
必须用自定义组件时，用 class 控制：，再配 .is-disabled { cursor: not-allowed; color: #999; }，同步加 aria-disabled="true" 和 tabindex="-1"


最常被忽略的是：禁用状态不只是视觉变灰，它必须同步 DOM 层（disabled 或 aria-disabled）、CSS 层（样式+光标）、行为层（事件拦截+焦点管理）三者一致，否则用户就会遇到“看着不能点，结果点了有反应”或“读屏器说能点，但点不动”的问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！