firefox - 如何去除Firefoxs按钮轮廓,让它像链接那样?

  显示原文与译文双语对照的内容

this, 链接我的能力做的难看的带点焦点 outlines: Firefox 不显示


a:focus { 
 outline: none; 
}

但是我如何为 <button> 标签做这个? 当我这么做的时候:


button:focus { 
 outline: none; 
}

当我点击按钮时,这些按钮仍然有焦点轮廓。

( 当然,我知道这是一个可用性问题,但我想提供我自己的焦点提示,而不是丑陋的灰色点)

时间:

如果你喜欢使用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; 
 }

下面的工作为我提供了链接,分享了分享的想法,以防有人感兴趣。


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

cheers!

在 Firefox 中无法用CSS删除这些点的焦点。

在 Firefox 并将 browser.display.focus_ring_width 设置为如果你有对电脑中应用的访问你的web应用中的工作方式,请转到 那么 Firefox 根本不会显示任何虚线边框。

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

你可能想要加强焦点,而不是放弃它。


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

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

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


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

...