如何删除BUTTONS上的Firefox虚线轮廓以及链接？

Question

我可以让Firefox不在链接上显示丑陋的虚线焦点轮廓：

a:focus { 
    outline: none; 
}

但是我如何才能为<button>标签执行此操作？当我这样做时：

button:focus { 
    outline: none; 
}

单击按钮时，按钮仍然具有点状焦点轮廓。

（是的，我知道这是一个可用性问题，但我想提供适合设计的焦点提示，而不是丑陋的灰点）

Answer 1

button::-moz-focus-inner {
  border: 0;
}

Answer 2

无需定义选择器。

:focus {outline:none;}
::-moz-focus-inner {border:0;}

但是，这违反了W3C的可访问性最佳做法。该大纲可以帮助那些使用键盘进行导航。

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Answer 3

如果您更喜欢使用CSS来摆脱虚线轮廓：

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Answer 4

如果有人对此感兴趣，以下是LINKS的情况，请考虑分享。

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

干杯！

Answer 5

:focus, :active {
    outline: 0;
    border: 0;
}

Answer 6

[更新]此解决方案不再有效。对我有用的解决方案是https://stackoverflow.com/a/3844452/925560

标记为正确的答案不适用于Firefox 24.0。

要删除按钮和锚标记上Firefox的虚线轮廓，我添加了以下代码：

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

我在这里找到了解决方案：http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Answer 7

在这里尝试了大部分答案，但这些答案都不适合我。当我意识到我必须摆脱Chrome上的按钮上的蓝色轮廓时，我找到了另一个解决方案。 Remove blue border from css custom-styled button in Chrome

此代码适用于Windows 7上的Firefox版本30.也许它可能会帮助其他人：）

button:focus {outline:0 !important;}

Answer 8

使用CSS无法在Firefox中删除这些虚线焦点。

如果您可以访问web应用程序所在的计算机，请转到Firefox中的about：config并将browser.display.focus_ring_width设置为0.然后Firefox将不会显示任何虚线边框。

以下错误解释了该主题：https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Answer 9

网上有许多解决方案，其中很多都有效，但要强制执行此操作，以便在使用以下内容时绝对无法突出显示/关注：

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

这只是增加了一点额外的安全性＆amp;达成协议！

Answer 10

使用此代码在Firefox 46和Chrome 49上测试。

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

之前（可见白点）

之后（白点不可见）

如果您只想应用于少数输入字段，按钮等。请使用更具体的代码。

input[type=text] {
  outline: none !important;
}

快乐编码!!

Answer 11

只需将此css添加到选择框

即可

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

这对我来说很好。

Answer 12

在大多数情况下，如果没有将 !important 添加到CSS代码中，它将无效。

因此，不要忘记添加!important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

或任何其他代码：

button::-moz-focus-inner {
  border: 0 !important;
}

Answer 13

看起来实现这一目标的唯一方法是设置

browser.display.focus_ring_width = 0

in about：config on per browser basis。

Answer 14

这将获得范围控制：

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

来自：Remove dotted outline from range input element in Firefox

Answer 15

下面的CSS代码可以删除它：

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 16

从链接，按钮和输入元素中删除虚线轮廓。

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 17

如果按钮上有边框，并希望隐藏Firefox 中没有删除边框的虚线轮廓（因此它在按钮上有额外的宽度），您可以使用：

.button::-moz-focus-inner {
    border-color: transparent;
}

Answer 18

button::-moz-focus-inner { border: 0; }

其中button可以是您要禁用其行为的CSS选择器。

Answer 19

我认为你应该通过删除焦点轮廓来真正了解你正在做什么，因为它会使键盘导航和可访问性变得混乱。

如果由于设计问题需要将其取出，请在按钮中添加:focus状态，将其替换为其他视觉提示，例如，将边框更改为更亮的颜色或类似内容。

有时候我觉得有必要把这个烦人的轮廓拿出来，但我总是准备一个备用焦点视觉提示。

从不使用blur() js函数。使用::-moz-focus-inner伪类。

Answer 20

你可能想要加强焦点而不是摆脱它。

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

Answer 21

这适用于firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Answer 22

您可以在CSS中尝试button::-moz-focus-inner {border: 0px solid transparent;}。

Answer 23

从上面尝试了很多选项之后，只有下面的内容对我有用。

{{1}}

Answer 24

与Bootstrap 3一起，我使用了这段代码。第二组规则只是撤消引导程序对焦点/活动按钮的作用：

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

请注意，您的自定义css文件应该在您的html代码中的Bootstrap css文件之后覆盖它。

Answer 25

是的，不要错过！重要

button::-moz-focus-inner {
 border: 0 !important;
}