如何删除在小屏幕上单击按钮时出现的蓝色方块？

Question

当我在 Chrome 开发工具中将屏幕尺寸设置为较小或当我在手机上检查我的项目时，当我单击按钮时，按钮周围会暂时出现一个蓝色方块。我尝试将

outline: none

或

outline: 0

设置为

button

、

button:hover

、

button:focus

和

button:active

来防止出现这种情况，但没有明显的变化。我检查了 Chrome 开发工具中的样式，但我无法弄清楚这个蓝色方块来自哪里以及如何删除它或使其不可见。欢迎任何帮助。

这是我的 HTML：

<button>
    <span class="dice-wrapper">
        <img src="./src/assets/icon-dice.svg" alt="Dice icon">
    </span>
</button>

这是我的CSS：

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);
}

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

button:focus, button:active {
  box-shadow: none;
}

GitHub 上的完整代码：https://github.com/Marjolein-Kasman-de-Jong/advice-generator-app

GitHub 页面上的项目：https://marjolein-kasman-de-jong.github.io/advice-generator-app/

Answer 1

button {
  -webkit-tap-highlight-color: transparent;
}