Question

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

在阅读有关“删除白色边框（特别是Dotted border around link?和内部链接）的文章之后，我尝试了使用或不使用{{1 }}。

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

"outline: 0;

outline: none;

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

Answer 2

您需要为不同的浏览器添加挫折，例如：

  def reduceLeft[B >: A](op: (B, A) => B): B = {

这些是相关渲染引擎（Chrome的-webkit，Safari； Firefox的-moz，Opera的-o，Internet Explorer的-ms）提供的供应商前缀属性。通常，在W3最终澄清/定义之前，它们会用于实现新的或专有的CSS功能。

Answer 3

a::-moz-focus-inner在我无法解释React Router重定向导致焦点边界的情况下不起作用。选择器本身未激活。

暂时解决（但不满意）：

a::-moz-focusring {
  outline: none;
}

Answer 4

只需设置边界：0，我已经更新了您的代码，请尝试一下！

 <input type="button" value="text">

在样式标签中只需使用：-

 input[type="button"]::-moz-focus-inner {
            border: 0
        }

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

4 个答案: