:disabled伪类仅对原生表单元素生效,需配合disabled属性使用;禁用非表单元素应使用类名+pointer-events:none及aria-disabled。

直接用 :disabled 伪类就能给原生按钮设置禁用样式,关键是要匹配到真正带 disabled 属性的元素,而不是靠类名“假装”禁用。
只对原生表单控件生效
浏览器默认的禁用样式很弱,用户容易误点。建议主动覆盖,从颜色、透明度、光标、边框、阴影几方面强化提示: CSS 只改外观,不阻止点击行为。必须同步操作 DOM 的 立即学习“前端免费学习笔记(深入)”; 如果禁用的是 :disabled 是浏览器原生支持的状态伪类,仅作用于 、、、 这类有 disabled 属性的表单元素。普通 disabled 属性也不会触发该伪类。
button:disabled { cursor: not-allowed; opacity: 0.6; }
div:disabled { ... }(浏览器完全忽略)视觉上要和启用状态明显区分开
opacity: 0.5~0.7 降低整体明度,但别低于 0.4,否则影响可读性cursor: not-allowed,鼠标悬停时明确显示禁止符号#e0e0e0),文字色变浅(如 #999),避免用纯黑或高对比色box-shadow 和 border 的交互态效果(比如 hover 阴影、聚焦轮廓)配合 JavaScript 动态控制才真正禁用
disabled 属性,才能让按钮既“看起来不能点”,也“实际点不动”:
btn.disabled = true 或 btn.setAttribute('disabled', '')
btn.disabled = false 或 btn.removeAttribute('disabled')
.disabled)不会禁用表单提交或键盘聚焦,必须靠原生 disabled 属性需要禁用非表单元素?用类名 + pointer-events










