How to remove Firefox's dotted outline on BUTTONS as well as links?

2018-06-14 13:18:29

I can make Firefox not display the ugly dotted focus outlines on links with this:

a:focus { 
    outline: none; 
}

But how can I do this for <button> tags as well? When I do this:

button:focus { 
    outline: none; 
}

the buttons still have the dotted focus outline when I click on them.

(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)

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

No need to define a selector.

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

However, this violates accessibility best practices from the W3C. The outline is there to help those navigating with keyboards.

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/41400.html

上一篇: 双击后防止文本选择

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