仅在移动/触摸界面上对 <button> 产生可怕的焦点效果

Question

所以我在 React 应用中有一个标准实现：

<button
   onClick={this.handleClick.bind(this)}
   className="button--round">
   {buttonContent}
</button>

奇怪的是，该按钮在笔记本电脑浏览器中看起来不错（用鼠标单击），但在我的 Android 手机上的 Firefox 中，一旦我触摸该按钮，它就会得到一个可怕的虚线边框（直到我触摸其他地方）-它看起来像这样的“焦点”行为（比如通过键盘上的界面按 Tab）：

我试过了：

button:active,
button:focus {
  outline: none;
}

没有改善。我还在这里搜索了各种“粘性悬停”答案并完全禁用悬停，没有任何效果。有什么建议吗？

Answer 1

您可以删除伪元素-moz-focus-inner 的border 以摆脱这种行为。

button::-moz-focus-inner {
  border: 0;
}