我可以使 Firefox 不在链接上显示丑陋的虚线焦点轮廓:
a:focus {
outline: none;
}
但是我怎样才能对 <button>
标记也这样做呢?当我这样做时:
button:focus {
outline: none;
}
当我单击它们时,这些按钮仍然具有虚线焦点轮廓。
(是的,我知道这是一个可用性问题,但我想提供我自己的适合设计的焦点提示,而不是丑陋的灰点)
button::-moz-focus-inner {
border: 0;
}
无需定义选择器。
:focus {outline:none;}
::-moz-focus-inner {border:0;}
但是,这违反了 W3C 的可访问性最佳实践。大纲可以帮助那些使用键盘导航的人。
https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples
<button>
,不适用于 <a>
或 <input>
without ... an author-supplied visual focus indicator
时才会中断 a11y - 换句话说,正如 OP 所述,用您自己的样式替换用户代理样式是可以的。理想情况下,它应该是高对比度的。
如果您更喜欢使用 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;
}
0px
可以只替换为 0
在 LINKS 的情况下,以下内容对我有用,考虑分享 - 以防有人感兴趣。
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
干杯!
a { outline: none; }
就足够了。
a { outline: none; }
与 !important
一起使用 -> a { outline: none !important; }
:focus, :active {
outline: 0;
border: 0;
}
a
元素,所以我找到了一个不错的选择 body :focus, body :active { outline: 0; border: 0; }
::-moz-focus-inner { border: 0; }
[更新] 此解决方案不再有效。对我有用的解决方案是这个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
在这里尝试了大多数答案,但没有一个对我有用。当我意识到我也必须摆脱 Chrome 上按钮上的蓝色轮廓时,我找到了另一个解决方案。 Remove blue border from css custom-styled button in Chrome
这段代码在 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;
}
来自:Remove dotted outline from range input element in Firefox
无法使用 CSS 在 Firefox 中移除这些点状焦点。
如果您可以访问您的 web 应用程序所在的计算机,请转到 Firefox 中的 about:config 并将 browser.display.focus_ring_width
设置为 0。然后 Firefox 将根本不会显示任何虚线边框。
以下错误解释了该主题:https://bugzilla.mozilla.org/show_bug.cgi?id=74225
::-moz-focus-inner {border:0;}
效果很好。
在网上找到了许多解决方案,其中许多都有效,但要强制这样做,因此一旦使用以下内容,绝对没有任何东西可以突出/聚焦:
::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
}
这只是增加了一点额外的安全性并完成了交易!
只需为选择框添加此 css
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
这对我来说很好。
使用此代码在 Firefox 46 和 Chrome 49 上进行了测试。
input:focus, textarea:focus, button:focus {
outline: none !important;
}
之前(白点可见)
https://i.stack.imgur.com/1hP1m.png
https://i.stack.imgur.com/62tZV.png
如果您只想应用于少数输入字段、按钮等。请使用更具体的代码。
input[type=text] {
outline: none !important;
}
!important
来覆盖 Firefox 的样式表。干杯!
我认为您应该通过删除焦点轮廓来真正知道自己在做什么,因为它可能会弄乱键盘导航和可访问性。
如果您因为设计问题需要将其删除,请向按钮添加 :focus
状态,用其他视觉提示替换此状态,例如将边框更改为更亮的颜色或类似的东西。
有时我觉得有必要去掉那个烦人的轮廓,但我总是准备一个备用的焦点视觉提示。
并且从不使用 blur()
js 函数。使用 ::-moz-focus-inner
伪类。
在大多数情况下,如果不将 !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;
}
button::-moz-focus-inner { border: 0; }
其中 button
可以是您想要禁用该行为的任何 CSS 选择器。
您可能想要加强焦点而不是摆脱它。
button::-moz-focus-inner {border: 2px solid transparent;}
button:focus::-moz-focus-inner {border-color: blue}
从链接、按钮和输入元素中删除虚线轮廓。
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;
}
如果您在按钮上有边框并且想要在 Firefox 中隐藏虚线轮廓而不删除边框(因此它是按钮上的额外宽度),您可以使用:
.button::-moz-focus-inner {
border-color: transparent;
}
下面的 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;
}
看起来实现这一点的唯一方法是设置
browser.display.focus_ring_width = 0
在 about:config 每个浏览器的基础上。
这适用于 Firefox v-27.0
.buttonClassName:focus {
outline:none;
}
在尝试了上面的许多选项之后,只有以下对我有用。
*:focus, *:visited, *:active, *:hover { outline:0 !important;}
*::-moz-focus-inner {border:0;}
button:focus { outline: none !important }
或者如果您喜欢我不喜欢 !important,这也可以覆盖 Firefox 样式::root button:focus { outline: none }
与 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 文件之后以覆盖它。
是的,不要错过!重要
button::-moz-focus-inner {
border: 0 !important;
}
您可以在 CSS 中尝试 button::-moz-focus-inner {border: 0px solid transparent;}
。
:focus {outline:none !important;}