html - 如何删除聚焦按钮文本周围的白色虚线边框

Question

我需要，但不能，删除焦点按钮文本周围的白色虚线边框。

在阅读了关于“删除白色边框(尤其是 Dotted border around link? 和内部链接)”的文章后，我尝试了几种禁用轮廓的解决方案，例如 "outline: 0; 或 outline: none; ，是否使用 !important。

但没有任何方法可以去除聚焦按钮文本周围的白色虚线边框。 这是我最简单的测试页面代码。我无法显示屏幕截图，因为它会移除按钮的焦点。

button {
  font-size: 87.5%;
  font-family: "ubuntu", Sans-serif;
  padding: 0 16px;
  min-width: 64px;
  height: 36px;
  cursor: pointer;
  background-color: royalblue;
  color: white;
  border: 0;
}

button:focus,
button:active {
  outline: none;
  outline: 0;
  outline: none !important;
  outline: 0 !important;
}

<button type="button">TEST</button>

在 Ubuntu 18.04 (Bionic Beaver) 上使用 Firefox 67.0.3，此页面仍然显示聚焦按钮文本周围的白色虚线边框，我想将其删除(我将用我自己的方法显示焦点) .

Answer 1

这些样式在 UA 级别声明，因此每个浏览器都有自己的实现(在 Firefox 的情况下，针对它们的伪元素)。

在 Firefox 中，您可以使用 ::-moz-focus-inner 伪元素:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
}