disabled按钮的遮罩必须用:disabled伪类，不能靠pointer-events: none或透明度模拟；需确保按钮有disabled属性，用button:disabled写样式，并兼顾高对比度与深色模式适配。
disabled按钮的遮罩必须用:disabled伪类，不能靠pointer-events: none或透明度模拟
禁用按钮的视觉反馈必须真实反映其不可交互状态，否则会破坏可访问性（a11y）和表单提交逻辑。浏览器对disabled属性有原生语义支持：disabled元素不会被form提交、不触发焦点、不响应鼠标/键盘事件，且自动获得:disabled伪类——这是加遮罩唯一可靠的钩子。
常见错误是只改opacity或加一层div遮罩，这会让按钮在视觉上“像”禁用，但实际仍可点击、仍能获取焦点、屏幕阅读器仍会朗读为可操作项。
正确做法：
- 确保按钮有
disabled属性（），而非仅靠CSS控制状态 - 用
button:disabled写样式，例如：button:disabled { opacity: 0.5; background-color: #e0e0e0; cursor: not-allowed; } - 若需更明显遮罩，可用
background-image叠加半透灰层，但不要覆盖disabled语义
readonly不适用于button，它只对input和textarea有效
readonly是表单控件的只读属性，它的设计目标是“内容可聚焦、可复制、不可编辑”，和禁用逻辑完全无关。按钮没有readonly概念——给加属性毫无效果，浏览器会忽略它，也不会触发:read-only伪类。
容易混淆的场景：
- 误以为
input[type="button"]能用readonly代替disabled：不行，readonly对type="button"无效 - 在
input[type="text"]上同时设readonly和disabled：二者行为不同——readonly仍提交值，disabled不提交；且:disabled优先级高于:read-only - 试图用
:read-only给按钮加样式：浏览器根本不会匹配，因为按钮不支持该伪类
遮罩要兼顾高对比度模式与深色主题适配
单纯用opacity: 0.4在Windows高对比度模式下可能失效（系统会强制重置透明度），而深色主题下background-color: #e0e0e0会显得突兀。真正健壮的遮罩需要分层处理：
- 用
color-scheme: light dark声明组件支持深色模式，再配合@media (prefers-color-scheme: dark)调整遮罩色值 - 避免依赖透明度做禁用标识，优先使用明确的灰阶背景+禁用光标+语义属性
- 测试高对比度：在Windows设置中开启“高对比度模式”，确认按钮仍显示为不可用状态（如文字变粗、背景变实色）
JavaScript动态切换disabled时，CSS遮罩会自动生效，无需手动增删class
这是:disabled伪类的最大优势：只要JS修改element.disabled = true，样式立即响应，无需额外操作DOM class。但要注意几个坑：
- 用
setAttribute('disabled', '')可以，但removeAttribute('disabled')必须完整移除，不能只设disabled="false"（HTML中disabled是布尔属性，值为任意非空字符串都生效） - React/Vue等框架中，绑定
disabled={isDisabled}即可，框架会正确处理布尔属性的增删 - 不要在JS里同时写
el.style.opacity = '0.5'和el.disabled = true——CSS优先级可能冲突，应交由:disabled统一控制
禁用状态的遮罩不是视觉装饰，而是语义契约。一旦绕过disabled属性和:disabled伪类，就等于主动放弃表单验证、可访问性和用户预期——这些地方出问题，往往到无障碍审计或残障用户反馈时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
