CSS伪类:disabled与:enabled_表单禁用状态的视觉处理

disabled元素仍可触发focus/blur事件，需用input:disabled:focus重置焦点样式；:enabled无法响应js动态禁用；fieldset disabled使子元素无disabled属性，需用后代选择器或class控制；高对比度模式下应使用graytext等系统关键词确保可访问性。

disabled 伪类不触发点击事件，但能响应 focus/blur

很多人以为加了 :disabled 就彻底“失效”，其实不然：它只是禁用表单控件的交互逻辑（比如提交、输入），但元素本身仍可被聚焦（尤其在键盘导航时），focus 和 blur 事件照常触发。这会导致视觉反馈错乱——比如你用 :focus 给边框加高亮，禁用状态下按 Tab 键过去，依然会亮。

• 真实场景常见于管理后台的批量操作按钮组，某按钮临时 disabled，但用户仍可通过键盘切换到它
• 修复方式不是删掉 :focus 样式，而是叠加写：input:disabled:focus { outline: none; box-shadow: none; }
• 注意 safari 对 :disabled:focus 支持较晚（ios 15.4+ 才稳定），旧版本需用 input[disabled]:focus 兜底

enabled 伪类不能用于禁用元素的“反向样式”

:enabled 看似是 :disabled 的镜像，但它只匹配“本可以启用”的元素——也就是说，如果一个 input 没有 disabled 属性，哪怕它被 JavaScript 动态设为 disabled = true，:enabled 依然生效。真正的问题在于：它无法感知运行时状态变化。

• 典型错误：写 button:enabled { opacity: 1; } button:disabled { opacity: 0.5; }，结果 JS 动态禁用后，样式没更新
• 原因：浏览器只在解析 HTML 或属性变更时重新计算伪类，而 element.disabled = true 不触发属性变更（它是 IDL 属性，非 content Attribute）
• 可靠做法是手动同步：JS 禁用时同时加 class，如 btn.classList.add('is-disabled')，然后用 .is-disabled 控制样式

fieldset disabled 影响整个子树，但子元素的 :disabled 不再匹配

给 fieldset 加 disabled，它内部所有表单控件都会变灰、不可交互——这是标准行为。但很多人没意识到：此时子元素（如 input）自身并不带 disabled 属性，因此 input:disabled 选择器完全不生效。

• 现象：你写了 input:disabled { background: #eee; }，但 fieldset 禁用后，input 背景没变
• 解决方法只有两种：一是用 fieldset:disabled input 这类后代选择器；二是放弃伪类，统一用 class 控制（更可控）
• 性能提示：嵌套过深的 fieldset:disabled input[type="text"] 在低配设备上可能触发重排，建议限制层级 ≤2

disabled 样式在高对比度模式下容易失效

windows 高对比度模式或 macos 的“增加对比度”开启后，浏览器会强制覆盖部分 css，包括 background-color 和 border。这意味着你精心写的 input:disabled { background: #f5f5f5; color: #999; } 可能全被系统主题接管。

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

• 验证方式：在 Windows 设置 → 辅助功能 → 高对比度 中开启，看禁用态是否还能区分
• 关键补救：必须显式设置 color 和 border-color，且避免用 opacity（它会被忽略）
• 更稳妥的写法：input:disabled { color: GrayText; border-color: ButtonShadow; } —— 这些是系统关键词，浏览器会映射到当前主题的实际颜色

最麻烦的其实是组合态：比如一个 button 同时有 disabled、:hover、又在 fieldset 里，还开了高对比度。这时候伪类优先级、系统覆盖、JS 同步时机全得对齐，漏一环就出视觉断层。