如何移除Safari浏览器中点击按钮时出现的蓝色外边框？

你设置的a {outline: none;}未生效，是因为Safari基于webkit内核有专属的可交互元素焦点高亮私有规则，可通过以下方式覆盖：

• 全局移除所有元素的默认蓝色焦点边框（含移动端点击高亮）：

* {
  outline: none;
  /* 覆盖Safari私有点击高亮色 */
  -webkit-tap-highlight-color: transparent;
}
/* 覆盖Safari专属焦点环样式 */
*:-webkit-focus-ring {
  outline: none;
}

• 仅针对a标签、按钮等指定元素移除：

a, button, [role="button"], input {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
a:-webkit-focus-ring, button:-webkit-focus-ring {
  outline: none;
}

• 如果样式仍未生效，优先检查是否为选择器优先级不足，可临时加!important测试验证问题，比如：

a {
  outline: none !important;
}

注意：直接全局移除焦点轮廓会影响键盘导航用户的使用体验，无障碍友好的做法是移除默认样式后，自定义一套辨识度足够的焦点状态样式。

内容的提问来源于stack exchange，提问作者clmsftsw