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

Question

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

a:focus { 
    outline: none         


        

Answer 1

I think you should really know what you're doing by removing the focus outline, because it can mess it up for keyboard navigation and accessibility.

If you need to take it out because of a design issue, add a :focus state to the button that replaces this with some other visual cue, like, changing the border to a brighter color or something like that.

Sometimes I feel the need to take that annoying outline out, but I always prepare an alternate focus visual cue.

And never use the blur() js function. Use the ::-moz-focus-inner pseudo class.