pointer-events: none 不能真正禁用表单控件，仅视觉屏蔽鼠标事件；它不阻止键盘聚焦、回车/空格触发、屏幕阅读器识别及表单提交，真正禁用须用 disabled 属性或 aria-disabled="true"。
pointer-events: none 不能真正禁用表单控件
直接给 <input> 或 <button> 加 pointer-events: none，看起来点不动了，但实际没改变元素的语义状态——它依然可聚焦、可键盘操作（Tab 切入后按空格/回车仍会触发）、屏幕阅读器仍认为它是启用的。这不是真正的禁用，只是“假装禁用”。
真正禁用必须用原生属性：disabled（表单控件）或 aria-disabled="true"（自定义组件）。CSS 只负责视觉反馈。
-
pointer-events: none适合临时屏蔽交互区域（比如遮罩层、非交互容器），不适合替代disabled - 它不阻止键盘焦点进入，也不影响表单提交行为
- 在 Safari 中对某些内联元素（如
<span>包裹的按钮）可能表现不一致
禁用状态下该用什么 CSS 选择器
对原生禁用控件，优先用属性选择器匹配真实状态，而不是靠 class 模拟：
-
input:disabled、button:disabled—— 稳定、语义正确、无需 JS 同步 class -
[aria-disabled="true"]—— 用于自定义组件（如 React 封装的MyButton） - 避免写
.is-disabled这类纯 class 控制，容易和真实状态脱节
示例：
立即学习“前端免费学习笔记（深入）”；
button:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #e0e0e0;
}
为什么不能只靠 opacity 和 cursor
仅设 opacity: 0.5 和 cursor: not-allowed 是常见疏漏——它们不传达可访问性信息，也不适配高对比度模式。
- 屏幕阅读器不会读出“已禁用”，除非 DOM 状态真实（
disabled或aria-disabled） - Windows 高对比度模式下，
opacity可能被忽略，需额外用color、border-color显式降阶 - 部分用户依赖键盘导航，
tabindex="-1"必须配合disabled使用，否则 Tab 仍能停驻
禁用样式要同步处理 focus 状态
禁用元素不该有 focus 样式，但浏览器默认仍可能渲染 :focus（尤其当通过 JS 移除 disabled 前短暂存在）。
- 显式重置：
button:disabled:focus { outline: none; box-shadow: none; } - 若使用
aria-disabled，记得同时写[aria-disabled="true"]:focus - 不要依赖
:not(:disabled)来控制 focus 样式，逻辑易反
最稳妥的方式：禁用状态优先级高于 focus，用更具体的选择器覆盖。
禁用不是视觉开关，是状态+语义+样式的三重对齐。漏掉任意一环，都可能让键盘用户或屏幕阅读器用户卡住。
