it-swarm.cn

如何删除钮扣上的Firefox的虚线轮廓以及链接?

我可以让Firefox不显示丑陋的虚线焦点轮廓 链接 有了这个:

a:focus { 
    outline: none; 
}

但是我怎么能为<button>标签做这个呢?当我这样做:

button:focus { 
    outline: none; 
}

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

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

451
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
678
user27656

无需定义选择器。

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

但是,这违反了W3C的可访问性最佳实践。该大纲可以帮助那些使用键盘导航的人。

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

275
Anderson Custódio

如果您更喜欢使用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; 
    }
46
chinkchink

在LINKS的情况下,以下对我有用,想到分享 - 以防有人感兴趣。

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

干杯!

41
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

[更新]此解决方案不再起作用。对我有用的解决方案就是这个 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

9
Renato Carvalho

在这里尝试了大部分答案,但它们都没有为我工作。当我意识到我必须摆脱Chrome上的按钮上的蓝色轮廓时,我找到了另一个解决方案。 从Chrome中的css自定义样式按钮中删除蓝色边框

这段代码在Windows 7上的Firefox版本30上适用于我。也许它可能会帮助其他人:)

button:focus {outline:0 !important;}
7
Vartox

网上有很多解决方案,其中很多都可以使用,但要强制执行此操作,以便在使用以下内容时绝对没有任何内容可以突出显示/聚焦:

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

这只是增加了一点额外的安全性和密封交易!

5
Shannon Hochkins

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

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

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

5
Vitaly Sharovatov

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

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

之前 (白点可见)

input with white dots

之后 (白点不可见) enter image description here

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

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

快乐编码!!

4
Madan Sapkota

只需为选择框添加此css即可

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

这对我来说很好。

3
Abhay Singh

在大多数情况下,如果没有将!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; }

3
herci

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

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

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

如果你在按钮上有一个边框,并想在Firefox中隐藏虚线轮廓 没有 删除边框(因此它是按钮上的额外宽度),你可以使用:

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

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

browser.display.focus_ring_width = 0

在about:config基于每个浏览器。

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

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

2
wavded

我认为你应该通过删除焦点轮廓来真正了解你正在做什么,因为它可以搞砸键盘导航和可访问性。

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

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

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

2
Flatline

下面的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;
}
2
kurumkan

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

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;
}
2
Fizer Khan

这将获得范围控制:

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

来自: 从Firefox中的范围输入元素中删除虚线轮廓

2
bob

是的,不要错过 !重要

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

在尝试了上面的许多选项后,只有以下工作适合我。

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}
0
Waqas Bukhary

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

0
usual

这适用于firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

与Bootstrap 3一起,我使用了这段代码。第二组规则只是 撤消 bootstrap对焦点/活动按钮的作用:

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文件之后覆盖它。

0
Ehsan88