如何删除火狐的按钮上的虚线轮廓以及链接？

2018-06-14 13:18:29

我可以让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

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

链接地址: http://www.djcxy.com/p/41399.html

上一篇: How to remove Firefox's dotted outline on BUTTONS as well as links?

下一篇: Text Selection Behavior in Chrome and Firefox for Elements with Padding