如何通过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 样式。