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

我使用的是Firefox 10，Windows 7并且不确定较旧的版本，但是当我单击按钮时，按钮周围会出现蓝色边框。如何删除Firefox中的按钮周围的蓝色边框？

我创建了下面的示例。

我删除了虚线和CSS之下，但我也不想蓝色边框。我无法确定如何删除它，甚至可以删除它？

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

下面没有工作......

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

这是我讲的邪恶蓝色边框。

enter image description here

2012-03-02 masato-san

Visited？从什么时候按钮被标记访问？您使用的操作系统（和主题，如果适用）？考虑提供一个截图，太... – 2012-03-02 07:05:23

我知道一个：访问，所以我只是给了一个没有工作的尝试 – 2012-03-02 07:07:07

啊，你可以尝试没有'：visited';它只适用于访问过的链接，而一个按钮不是链接。我的机器上没有在Firefox中出现蓝色边框，所以我无法测试它... – 2012-03-02 07:07:47

也就是说火狐的用户界面，无论是主题还是没有。不是你从编码中得到的东西。

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

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

而且您以后可以在其上添加你的造型。这是一个demo。您可以按照自己想要的方式为hover，visited，active定义自定义状态。

2012-03-02 07:21:00 Starx

+1给你演示和东西:) – Sarfraz 2012-03-02 07:37:15

啊我看到了，所以没有办法保持按钮看起来像，只能删除蓝色边框...感谢演示:) – 2012-03-02 07:45:57

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

由于您看到的按钮外观是由OS /浏览器主题而不是CSS指定的，因此无法通过CSS告知浏览器“将此按钮绘制为未聚焦”。

还请注意<button>和<input type="button">之间的差异;您可以在第一个示例中指定CSS匹配，但不在第二个示例中。

2012-03-02 08:01:13

感谢您的见解:) – 2012-03-02 08:32:00

回答