移动端视图下点击元素时周围出现的蓝色框如何去除？

你之前尝试的:focus/:active清除outline、设置-webkit-tap-highlight-color: transparent无效，通常是样式优先级不足、遗漏对应属性、未覆盖所有交互状态导致的，可按以下方案逐步处理：

• 全局覆盖移动端点击高亮属性
  很多时候单元素设置或未加优先级标识的样式，会被第三方UI框架（Vant、Ant Design Mobile、Tailwind等）的默认样式覆盖，同时iOS Safari需要额外属性配合才能完全屏蔽点击高亮，全局写法如下：

  * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
  }
  

  说明：-webkit-touch-callout是iOS Safari专属属性，仅设置tap-highlight无法完全屏蔽部分版本iOS的点击蓝色反馈。

• 全场景重置交互元素的默认反馈样式
  移动端浏览器的蓝色点击反馈并非全部来自outline，很多场景下是box-shadow实现的，同时遗漏:focus-visible伪类会导致现代浏览器的默认焦点环无法清除，可针对性覆盖：

  /* 覆盖所有可交互元素的默认反馈样式 */
  a, button, input, select, textarea, [role="button"], [tabindex] {
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* 覆盖所有交互触发的状态样式，原生CSS无需嵌套即可生效 */
  a:focus, button:focus, input:focus, select:focus, textarea:focus, [role="button"]:focus, [tabindex]:focus,
  a:active, button:active, input:active, select:active, textarea:active, [role="button"]:active, [tabindex]:active,
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
  a:focus-within, button:focus-within, input:focus-within, select:focus-within, textarea:focus-within, [role="button"]:focus-within, [tabindex]:focus-within {
    outline: none !important;
    box-shadow: none !important;
  }
  

  说明：这是大部分人之前设置无效的核心原因——很多移动端浏览器的默认点击蓝框是box-shadow而非outline，仅清除outline无法达到效果。

• 特殊场景排查
  若以上设置后仍有蓝色框残留，可对照以下场景排查：

  • 检查第三方框架的自定义焦点样式：比如Bootstrap、Element Mobile等框架会通过CSS变量定义焦点阴影，需要将对应变量（如--focus-ring-box-shadow）的值设为transparent
  • 移动端调试元素实际样式：通过浏览器开发者工具的移动端调试模式，定位出蓝框的元素，在Computed面板确认蓝框对应的实际CSS属性（outline/box-shadow/background等），针对性覆盖
  • Webview场景排查：若页面是在原生App内嵌的H5环境运行，需检查原生Webview的默认配置，是否开启了系统级的点击高亮反馈，这类反馈无法通过CSS修改，需要原生侧调整配置

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