如何删除焦点按钮文字周围的白色虚线边框

Question

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

在阅读有关“删除白色边框（尤其是链接周围的虚线边框？和链接内部）”的文章之后，我尝试了几种禁用轮廓的解决方案，如"outline: 0;or outline: none;，不使用or !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;
}