如何在CSS中使用:disabled伪类优雅地美化不可点击状态的按钮？-css教程-PHP中文网

必须同时使用 button:disabled 和 button[disabled]，否则 ssr 或动态设 disabled 场景下样式失效；禁用态需显式设置 color、background、border、cursor、transition 等多属性，不可仅依赖 opacity 或 filter；非原生元素不支持 :disabled，须用 class + aria-disabled + tabindex 配合。

如何在css中使用:disabled伪类优雅地美化不可点击状态的按钮？

直接结论：只写 button:disabled 是危险的，必须搭配 button[disabled]，且禁用态样式不能只靠灰度或透明度——它必须同步视觉、交互和语义三者。

为什么 `button:disabled` 单独写经常没反应

根本不是 CSS 写错了，而是 DOM 上压根没真实存在 disabled 属性。React 的 disabled={true} 和 Vue 的 :disabled="true" 都是直接设置 el.disabled = true，这能触发 :disabled 匹配，但不会自动写入 HTML 属性 disabled=""；而 SSR 渲染出的静态 HTML、或手动用 setAttribute('disabled', '') 添加的按钮，只响应 [disabled]。两者覆盖场景不同，缺一不可。

常见错误现象：

本地开发看着正常，部署到 SSR 环境后禁用按钮颜色/光标没变
按钮禁用了，鼠标悬停时仍显示高亮色（被 .btn:hover 覆盖）
移动端 iOS Safari 对 :disabled 样式支持保守，[disabled] 更稳

`button:disabled` 和 `button[disabled]` 必须一起声明

推荐写法（显式、权重合理、覆盖全场景）：

button:disabled,
button[disabled],
input:disabled,
input[disabled],
select:disabled,
select[disabled],
textarea:disabled,
textarea[disabled] {
  background-color: #eaeaea;
  color: #666;
  border-color: #d0d0d0;
  cursor: not-allowed;
  opacity: 0.65;
  transition: none;
}

关键点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

不要只写 button:disabled —— 它在 SSR 或属性直设场景下会漏掉
必须显式重置 cursor: not-allowed，浏览器不会自动改光标
transition: none 是必须的，否则悬停动画可能残留
避免用 !important，靠选择器并列提升权重更可控

非原生按钮（如 `div` 或自定义组件）怎么办

:disabled 只匹配 button、input、select、textarea 这几类原生可禁用元素。给 div 加 disabled 属性完全无效，CSS 不识别，JS 也不阻止事件。

正确做法：

优先改用语义化 <button type="button"></button>，别模拟按钮
若必须用自定义组件，用 class 控制状态：<my-button class="is-disabled"></my-button>，再配 .is-disabled { cursor: not-allowed; color: #999; }
同步设置 aria-disabled="true" 和 tabindex="-1"，保证屏幕阅读器和键盘导航可感知
JS 事件处理开头必须加 if (el.disabled || el.hasAttribute('aria-disabled')) return;