如何通过CSS :disabled伪类给禁用表单控件添加视觉提示？

本文共计733个文字，预计阅读时间需要3分钟。

只有原生表单控件才能响应，例如：

button:disabled { cursor: not-allowed } 必须显式写

浏览器不会自动把禁用按钮的光标改成禁止符号，:disabled 只控制交互逻辑（如提交、聚焦），不改 cursor。漏掉这行，用户看到灰按钮却仍显示手型，会产生“能点”的错觉。

• 必须写 button:disabled { cursor: not-allowed; }，不能依赖全局重置或父级样式
• 旧版 Safari 对该规则支持不稳定，生产环境可加 !important（仅此一处合理）
• 若同时用了 pointer-events: none，会阻止 focus/blur，键盘用户无法跳过，不符合无障碍要求

禁用态不是只调 opacity，要同步重置多个视觉通道

单靠 opacity: 0.6 是危险的：它不改变颜色对比度，高对比度模式下可能完全不可读；也不影响焦点框，键盘用户 Tab 过去时仍会亮起 :focus 样式。

• 显式设置 color 和 background-color，例如 color: #999; background-color: #f5f5f5;
• 叠加写 input:disabled:focus { outline: none; box-shadow: none; } 消除焦点干扰
• 避免用 filter: grayscale() 单独做灰化——Safari 旧版会全黑，且不改变鼠标指针和语义
• 测试时手动删掉 DOM 中的 disabled 属性，看样式是否同步消失，验证是否真由该伪类控制

JS 动态禁用时，别用 setAttribute('disabled', '')

el.setAttribute('disabled', 'true') 虽然能让 :disabled 匹配，但语义不清；更稳妥的是直接操作 IDL 属性：el.disabled = true。后者确保 DOM 属性与 JS 属性同步，也兼容所有现代浏览器。

立即学习“前端免费学习笔记（深入）”；

• React 中避免 disabled={isLoading ? true : false}，直接写 disabled={isLoading}，否则 falsy 值（如 undefined）可能导致属性残留
• Vue 中用 v-bind:disabled="isDisabled"，并确认最终渲染的 <button> 上有该属性
• 如果用了 <fieldset disabled>，子 <input> 不再带 disabled 属性，input:disabled 不生效，得改用 fieldset:disabled input 后代选择器

真正可靠的禁用，是 DOM 层（disabled 或 aria-disabled="true"）、CSS 层（:disabled 或自定义 class）、行为层（事件 handler 开头加 if (el.disabled) return;）三者严格对齐。任何一环脱节，都会导致“看着不能点，结果点了有反应”或者“读屏器说能点，但点不动”。