如何删除Firefox中按钮周围的蓝色边框？

Question

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

我创建了以下示例。

http://jsfiddle.net/dEvKb/58/

我用css删除了虚线，但我也不想要蓝色边框。我无法想象如何删除它，甚至可以删除？

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

下面的

没有用......

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

这是我正在谈论的邪恶的蓝色边界。

Answer 1

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

如果您遇到麻烦，可以重置它并定义自己的风格。这是一个重置规则。

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

Check here

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

Answer 2

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

因为你看到的按钮外观是由操作系统/浏览器主题而不是CSS指定的，所以没有办法通过CSS告诉浏览器“将此按钮绘制为好像没有聚焦”。

另请注意<button>和<input type="button">之间的区别;你在第一个例子中指定了CSS匹配，但在第二个例子中没有。