仅iPhone移动端菜单出现蓝色边框问题排查

这是iOS Safari自带的焦点高亮样式，常规的border: none或outline: none可能无法覆盖它，试试这些针对性方案：

• 用Safari私有属性直接禁用点击高亮：

-webkit-tap-highlight-color: transparent;

把这段样式加到你的菜单按钮CSS里，能直接消除iOS上的蓝色高亮效果。

• 明确重置焦点状态的outline样式：

.menu-button:focus {
  outline: none;
  -webkit-outline: none;
}

部分场景下需要专门针对焦点状态设置，避免Safari默认的焦点边框生效。

• 若使用前端框架（如React、Vue），可在点击按钮后主动移除焦点：

// 示例：点击菜单按钮后失焦
const handleMenuToggle = (e) => {
  e.target.blur();
  // 这里写你的菜单展开/收起逻辑
};

注意：建议只给需要的按钮单独设置-webkit-tap-highlight-color，不要全局禁用，避免影响页面的可访问性。

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