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

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

Answer 2

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

Where button can be whatever CSS selector for which you want to disable the behavior.

Answer 3

There is many solutions found on the web for this, many of which work, but to force this, so that absolutely nothing can highlight/focus once a use the following:

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

This just adds that little bit extra security & seals the deal!

Answer 4

Yep don't miss !important

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

Answer 5

In most cases without adding the !important to the CSS code, it won't work.

So, do not forget to add !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

Or any other code:

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

Answer 6

:focus, :active {
    outline: 0;
    border: 0;
}