如何移除仅在移动端Chrome/Safari出现的React按钮白色发光轮廓

1. autofocus是核心诱因 #

你给按钮添加了autoFocus属性，移动端Chrome和Safari会为自动聚焦的元素渲染默认的焦点伸缩轮廓动画，而本地开发的移动端模拟环境不会完全复刻真实浏览器的这一行为，这就是本地无问题但线上出现异常的原因。

2. 用CSS移除默认焦点样式 #

由于你采用全局CSS设置按钮样式，直接在.auth-button的聚焦状态下覆盖浏览器默认样式即可，同时要兼顾WebKit内核浏览器的私有属性，保证样式优先级足够：

修改后的CSS代码：

.auth-button {
  text-align: center;
  display: inline-block;
  width: 100%;
  color: #fff !important;
  background-color: #da2f8e !important;
  border-radius: 8px !important;
  text-decoration: none;
  margin-top: 10px !important;
  margin-bottom: 5px !important;
  padding: 12px !important;
  font-size: 16px !important;
  font-family: 'Urbanist', sans-serif !important;
}

/* 新增：移除移动端焦点轮廓动画 */
.auth-button:focus,
.auth-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  /* 针对Chrome/Safari的私有属性 */
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}

补充说明 #

• :focus-visible是为了兼顾可访问性，保留键盘导航用户的焦点标识（这里设为无样式），如果完全不需要任何焦点状态，直接用:focus即可。
• -webkit-tap-highlight-color和-webkit-focus-ring-color是WebKit内核浏览器的私有属性，专门用来消除点击、聚焦时的高亮与轮廓效果。

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