如何去除 Firefox 中按钮周围的蓝色边框？答案

【问题标题】：How to remove blue border around the button in Firefox?如何去除 Firefox 中按钮周围的蓝色边框？
【发布时间】：2012-03-20 17:18:14
【问题描述】：

我正在使用Firefox 10、Windows 7 并且不确定旧版本，但是当我单击按钮时，按钮周围会出现蓝色边框。

我创建了下面的示例。

我删除了下面带有 css 的虚线，但我也不想要蓝色边框。我不知道如何删除它，甚至可以删除吗？

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

下面没用...

input[type="button"]:visited
{
    outline: none;
    border: none;
}

我说的是邪恶的蓝色边框。

【问题讨论】：

【解决方案1】：

这就是 Firefox 的 UI，无论是否有主题。不是你从编码中得到的东西。

如果它让您非常困扰，您可以重新设置它并定义您自己的风格。这是一个重置规则。

button { background: none transparent; border: none; }

您可以稍后在其上添加样式。这是一个demo。您可以按照自己的方式为hover、visited、active 定义自定义状态。

【讨论】：

【解决方案2】：

这个蓝色边框（取决于操作系统和主题）表示该按钮具有键盘焦点。虚线轮廓表示同一件事。如果您不关心使用键盘的人可以访问您的应用程序，那么您可以完全重新设置按钮的样式，以便在按钮获得焦点时没有独特的外观。

由于您看到的按钮外观是由操作系统/浏览器主题而不是 CSS 指定的，因此无法通过 CSS 告诉浏览器“绘制此按钮，就好像它没有聚焦一样”。

还要注意<button>和<input type="button">的区别；您在第一个示例中指定了 CSS 匹配，但在第二个示例中没有指定。

【讨论】：