CSS:focus伪类：提升表单可访问性技巧

:focus 只看是否获得焦点，不管怎么来的；:focus-visible 是浏览器根据用户交互意图智能判断——键盘操作才显示，鼠标点击默认不触发。这对可访问性很关键，但兼容性得留意。

• :focus-visible 在 Chrome 86+、Firefox 86+、Safari 15.4+ 支持，旧版 Safari 需用 @supports selector(:focus-visible) 降级
• 不要用 :focus-visible 完全替代 :focus：屏幕阅读器用户可能用键盘导航，但某些辅助技术仍依赖 :focus
• 若同时写 input:focus 和 input:focus-visible，后者优先级更高（同选择器权重下，后声明的覆盖前声明）
• 禁用 :focus-visible 的“自动判断”行为？可以加 focus-visible: auto 到根元素，但不推荐——它绕过了浏览器的可访问性逻辑

表单控件中 focus 样式被重置的典型场景

很多 CSS 重置库（如 Normalize.css、Tailwind 的 base styles）或组件库会主动清除 outline，导致你写的 :focus 看不见，其实规则已生效，只是没视觉反馈。

• 检查 computed styles：看 outline 是否为 none 或 0px，而不是只看自己的 CSS 文件
• 用 outline: 2px solid #007aff 比 border 更安全——border 会改变布局尺寸，outline 不占空间且符合 WCAG 聚焦指示要求
• 移动端 iOS Safari 默认给 input 加蓝色外发光，但一旦设了 outline，这个默认效果就没了，得手动补足对比度（至少 3:1）
• 避免用 !important 强行覆盖 outline：它会让后续的可访问性工具或用户自定义样式失效

JavaScript 中 focus() 调用失败的几个硬限制

不是所有 .focus() 调用都会成功，浏览器有明确的策略阻止“非用户发起”的聚焦，尤其涉及模态框、iframe 或异步时机。

• 页面未激活（比如标签页在后台）时调用 .focus() 会被静默忽略
• 在 setTimeout 或 Promise resolve 后立即调用，可能因渲染未完成而失败；稳妥做法是包一层 requestAnimationFrame 或监听 focusin 回调确认
• iframe 内容未加载完成时，其中元素的 .focus() 会抛 DOMException: Failed to execute 'focus' on 'HTMLElement'
• 使用 autofocus 属性比 JS 调用更可靠，但它只在元素插入 DOM 时生效一次，动态渲染的元素得靠 JS 补位

最常被忽略的一点：当父容器设置了 overflow: hidden 且子元素聚焦后溢出视口，焦点虽存在，但焦点样式可能被裁剪——这时候要检查容器的 clip-path、transform 或 contain 属性是否意外干扰了焦点指示的渲染。

到这里，我们也就讲完了《CSS:focus伪类：提升表单可访问性技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！