小屏幕点击按钮出现蓝色方框，如何移除该样式？

你遇到的这个蓝色方框不是CSS的outline，而是Chrome移动端（及小屏幕模拟模式）默认的点击高亮效果，由WebKit内核的-webkit-tap-highlight-color属性控制，默认是半透明蓝色，常规的outline: none无法移除它。

解决方案 #

直接在按钮样式中添加以下属性，并确保焦点状态的样式覆盖完整：

button {
  width: 64px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  background-color: var(--neon-green);
  /* 移除WebKit点击高亮 */
  -webkit-tap-highlight-color: transparent;
  /* 确保移除默认outline */
  outline: none;
}

button:hover {
  cursor: pointer;
  box-shadow: 0 0 40px 3px var(--neon-green);
}

button:focus, button:active {
  box-shadow: none;
  /* 补充焦点/激活状态的outline重置 */
  outline: none;
}

额外优化（兼顾可访问性） #

如果需要保留键盘导航时的焦点样式，同时移除点击触发的不必要高亮，可以使用:focus-visible伪类，只在键盘聚焦时显示焦点样式：

/* 移除非键盘触发的焦点高亮 */
button:focus:not(:focus-visible) {
  outline: none;
}

/* 可选：自定义键盘聚焦时的样式 */
button:focus-visible {
  outline: 2px solid #your-color;
}

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