如何在BUTTONS和链接上删除Firefox的虚线轮廓？
我可以让Firefox不在链接上显示丑陋的虚线焦点轮廓:
a:focus {
outline: none;
}
但是我怎样才能为<button>标签做这个呢？当我这样做:
button:focus {
outline: none;
}
单击按钮时,按钮仍然具有点状焦点轮廓.
(是的,我知道这是一个可用性问题,但我想提供适合设计的焦点提示,而不是丑陋的灰点)
小智 718
button::-moz-focus-inner {
border: 0;
}
- 这个对我来说不起作用,因为bootstrap.css正在制作这个丑陋的虚线按钮.相反,我把`:focus {outline:none!important;}` (19认同)
- 请注意,这也适用于输入(例如input :: - moz-focus-inner {border:0;}) (15认同)
- 双冒号的目的:(CSS3表示法)http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/ (14认同)
- 是的,它也适合我!现在怎样才能做出选择呢？ (13认同)
- :focus {outline:none;} :: - moz-focus-inner {border:0;}不太具体 (5认同)
小智 291
无需定义选择器.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
但是,这违反了W3C的可访问性最佳实践.该大纲可以帮助那些使用键盘导航的人.
https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples
- 谢谢,当正确答案没有时,这对我有用.我一定是在使用错误的选择器. (8认同)
- 似乎不适用于Mac上的FF 27.0.1 (4认同)
- 我将对有关这种中断的辅助功能的注释进行第二次注释。重要的是要记住，并非每个人都可以使用鼠标，看得见或看得见。也就是说，按照链接（和常识）隐藏大纲仅会在“没有...作者提供的视觉焦点指示器”的情况下中断[11]，换句话说，用您的用户代理样式替换如OP所述。理想情况下，它应该是高对比度的。 (4认同)
- 这个最好!接受的答案仅适用于`<button>`,而不是`<a>`或`<input>` (3认同)
- 完美的Mozilla Firefox 30在Ubuntu(GNU/Linux)下. (2认同)
小智 47
如果您更喜欢使用CSS来摆脱虚线轮廓:
/*for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{
border : 0;
}
/*for IE8 and below */
input[type="submit"]:focus, input[type="button"]:focus
{
outline : none;
}
fox*_*gga 42
在LINKS的情况下,以下对我有用,想到分享 - 以防有人感兴趣.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
干杯!
- 简单地说'a {outline:none; }`应该足够链接. (10认同)
- 在这里!重要的是诀窍,其他解决方案没有那个,并没有奏效.为了我. (3认同)
[更新]此解决方案不再起作用.对我有用的解决方案是这一个/sf/answers/269111671/
标记为正确的答案不适用于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://stackoverflow.com/a/3844452/925560 (2认同)
在这里尝试了大部分答案,但它们都没有为我工作.当我意识到我必须摆脱Chrome上的按钮上的蓝色轮廓时,我找到了另一个解决方案.从Chrome中的css自定义样式按钮中删除蓝色边框
这段代码在Windows 7上的Firefox版本30上适用于我.也许它可能会帮助其他人:)
button:focus {outline:0 !important;}
这将获得范围控制：
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
在网上找到了许多解决方案，其中许多有效，但要强制执行此操作，因此一旦使用以下内容，绝对没有任何东西可以突出显示/聚焦：
::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
}
这只是增加了一点额外的安全性并完成了交易！
使用CSS无法在Firefox中删除这些虚线焦点.
如果您可以访问web应用程序所在的计算机,请转到about:config in Firefox并设置browser.display.focus_ring_width为0.然后Firefox将不会显示任何虚线边框.
以下错误解释了该主题:https://bugzilla.mozilla.org/show_bug.cgi？id = 74225
- 这个问题询问如何用CSS完成,答案说它不可能.那是错误的.有可能. (5认同)
使用此代码在 Firefox 46 和 Chrome 49 上进行了测试。
input:focus, textarea:focus, button:focus {
outline: none !important;
}
之前（可见白点）
之后（白点不可见）
如果您只想应用于少数输入字段、按钮等，请使用更具体的代码。
input[type=text] {
outline: none !important;
}
快乐编码！！
只需为选择框添加此 css
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
这对我来说很好用。