Safari 的 :focus 轮廓难删是因 Apple 强制可访问性策略，需 outline: none + box-shadow 模拟 + tabindex ≥ 0 三者缺一不可；iOS 还须 appearance: none 和 -webkit-appearance: none；推荐用 :focus-visible 区分键盘/鼠标焦点，并用 rgba() 适配深色模式。
为什么 Safari 的 :focus 轮廓总是难看又难删？
Safari（尤其是 16.4+ 版本）对 outline 的渲染逻辑和其它浏览器不同：它默认添加一个深色、带内阴影的“苹果风”焦点环，且即使设了 outline: none，在某些场景下（比如 input[type="search"] 或启用了 VoiceOver 的系统设置中）仍会强制显示。这不是 bug，而是 Apple 对可访问性的强制策略——但直接删 outline 容易导致键盘用户无法感知焦点位置。
outline: none 不生效时该加什么？
必须配合以下三要素才能真正接管焦点样式，缺一不可：
- 显式声明
outline: none（清除默认轮廓） - 用
box-shadow模拟可定制的聚焦高光（推荐0 0 0 3px rgba(52, 152, 219, 0.5)这类柔和外扩） - 确保元素有
tabindex值 ≥ 0（Safari 对tabindex="-1"元素的:focus支持不稳定）
示例代码：
input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
border-color: #3498db;
}
移动端 Safari 必须重置 appearance 才能生效
iOS / iPadOS 上，原生输入框会忽略 :focus 样式，除非先剥离系统控件外观：
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
appearance: none和-webkit-appearance: none - 否则
:focus的box-shadow会被系统层遮盖或裁剪 - 搭配
touch-action: manipulation可避免点击延迟
完整基础声明建议：
input[type="text"],
input[type="email"],
input[type="password"] {
appearance: none;
-webkit-appearance: none;
touch-action: manipulation;
outline: none;
border: 1px solid #ccc;
border-radius: 6px;
padding: 10px;
}
input:focus {
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}
别忽略 :focus-visible 的兼容性补位
Safari 15.4+ 支持 :focus-visible，但它默认只在键盘触发焦点时生效（鼠标点击不触发），这对提升可访问性很关键。如果你只用 :focus，会导致鼠标用户也看到高亮环，反而干扰视觉流。
- 推荐组合写法：
input:focus:not(:focus-visible) { outline: none; }，让鼠标点击不显示环，键盘操作保留 - 若需全平台统一行为（比如设计规范强制所有焦点都可见），则跳过
:focus-visible，但务必测试 VoiceOver 用户路径 - 注意：Safari 对
:focus-visible的 polyfill 支持有限，不建议 JS 模拟
真正容易被忽略的是：Safari 的焦点环颜色会随系统深色模式自动切换，而 box-shadow 不会——所以用 rgba() 而非固定 hex 值，给它留出适配空间。
