CSS伪类:focus在Safari中不生效该怎么修复-css教程-PHP中文网

safari 的 :focus 并非失效，而是触发条件更严、默认样式弱且易被覆盖；修复需确认元素可聚焦、清除 outline 干扰、用 box-shadow 替代，并补全 :focus-visible 降级链。

css伪类:focus在safari中不生效该怎么修复

直接说结论：Safari 的 :focus 不是“失效”，而是触发条件更严、默认样式更弱、且容易被重置或覆盖；修复关键不是加更多 CSS，而是确认元素真能聚焦、清除干扰 outline、用 box-shadow 替代、并补上 :focus-visible 降级链。

常见现象是点击 input 后无高亮、DevTools 里 :focus 规则灰掉、或只闪一下就消失。根本原因不是语法错，而是：

元素未真正获得焦点：比如动态插入的 input 在渲染完成前就被 .focus() 调用，Safari 拒绝该操作
全局 * { outline: none; } 或 input { outline: 0; } 清掉了唯一可见反馈，又没提供替代样式
iOS Safari 对 input[type="number"] 或 contenteditable 的 :focus 支持不稳定，软键盘接管后状态不更新
父容器用了 overflow: hidden 或 transform，导致 outline 被裁切或定位异常

Safari 默认的 focus outline 很淡（尤其深色模式下），且极易被 reset 库或自定义规则干掉。别只检查你的 CSS，要看 computed styles 中 outline 最终值是否为 none 或 0px：

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

显式重置并替换：input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.3); }
避免用 border 动画——它会改变布局尺寸；box-shadow 不占空间、支持圆角、兼容 WCAG
如果用了 Normalize.css 或 Tailwind，检查是否已清掉 outline；补上 input { outline: 2px solid transparent; } 预留空间
禁用 -webkit-tap-highlight-color：iOS 点击时的蓝 overlay 和 :focus 无关，但会干扰判断，加 -webkit-tap-highlight-color: transparent;

纯 CSS 无法解决 Safari 的时机限制，需配合 JS 补位，尤其对动态组件和 iOS：

React/Vue 中首次聚焦失败？改用 setTimeout(() => el.focus(), 0) 延迟到渲染后
iOS Safari 下 input[type="search"] + overflow: hidden 组合会静默丢弃 :focus-within，此时必须监听 focusin 事件并手动加 class
确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 存在，否则 Safari 可能禁用部分 focus 样式
不要依赖 document.activeElement 立即判断——它在 focus 事件回调中才可靠；用 el.addEventListener('focus', handler) 而非 onfocus 属性

这是最常被忽略的可访问性断裂点：:focus-visible 在 Safari ≤16.3 中不支持，且它本身**不响应鼠标点击**。你看到的蓝框永远来自 :focus，而不是 :focus-visible：

错误写法：input:focus-visible { outline: none; } → 鼠标点击时该规则根本不匹配，等于没写
正确三段式（必须按顺序）：input:focus { outline: none; } → input:focus:not(:focus-visible) { outline: none; } → input:focus-visible { box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25); }
用 @supports selector(:focus-visible) 包裹降级规则，老 Safari 直接跳过，不报错也不影响原有 :focus
自定义组件（如封装的 Input）若没透传 focusOptions 或没设 role="textbox"，:focus-visible 会静默不触发