移动端按钮点击后出现蓝色边框是iOS Safari和部分Android浏览器对可聚焦元素添加的默认outline样式；直接写outline: none有时无效，因UA样式含!important、未覆盖:active等状态或outline-offset残留，应结合-webkit-appearance: none及替代焦点样式（如box-shadow）兼顾可访问性与视觉一致性。
移动端按钮点击后出现蓝色边框是什么问题
这是 iOS Safari 和部分 Android 浏览器对可聚焦元素（如 <button>、<a>）默认添加的 outline 样式，用于辅助访问（键盘导航或屏幕阅读器）。但视觉上常被误认为“bug”，尤其在自定义按钮样式后显得突兀。
直接写 outline: none 为什么有时无效
- 未覆盖浏览器默认优先级：某些 UA 样式使用
!important，纯 outline: none 可能被忽略
- 只写了伪类
:focus，但 iOS 点击瞬间触发的是 :active 或焦点获取过程，需同时处理
- 未重置
outline-offset，即使 outline 隐藏，偏移值残留可能导致布局微抖
- 部分安卓 WebView 对
outline 支持不一致，需搭配 -webkit-appearance: none
推荐写法：兼顾可访问性与视觉一致性
!important，纯 outline: none 可能被忽略:focus，但 iOS 点击瞬间触发的是 :active 或焦点获取过程，需同时处理outline-offset，即使 outline 隐藏，偏移值残留可能导致布局微抖outline 支持不一致，需搭配 -webkit-appearance: none
不要只在 :focus 上加 outline: none，应覆盖所有相关状态，并保留键盘用户的焦点提示替代方案：
button,
input[type="button"],
input[type="submit"] {
outline: none;
outline-offset: 0;
-webkit-appearance: none;
}
<p>button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
/<em> 提供替代焦点样式，例如底边强调或阴影 </em>/
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}</p><p>/<em> iOS 点击瞬态抑制（可选，减少视觉闪烁） </em>/
button:active,
input[type="button"]:active,
input[type="submit"]:active {
opacity: 0.9;
}注意：box-shadow 替代方案比纯删除更安全——它既去除了原生蓝框，又没完全剥夺焦点反馈，符合 WCAG 2.4.7（焦点可见性）要求。
为什么不能全局用 *:focus { outline: none }
这样会彻底破坏键盘用户（包括视障人士）的导航能力。真实场景中，只有明确是“装饰性按钮”或“已提供其他焦点指示”的组件才可移除 outline。常见误用场景：
立即学习“前端免费学习笔记（深入）”；
- 带
tabindex="0"的 div 按钮，未加任何焦点样式 - 模态框关闭按钮、分页链接等语义化交互控件
- 使用 JS 模拟按钮行为但未同步管理
focus状态
真正需要隐藏 outline 的，通常是纯视觉按钮（比如图标按钮无文字、且已有 hover/active 背景变化），且必须确保其有足够对比度的状态反馈。
