After trying many options from the above only the following worked for me.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

You can try button::-moz-focus-inner {border: 0px solid transparent;} in your CSS.

Along with Bootstrap 3 I used this code. The second set of rules just undo what bootstrap does for focus/active buttons:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

NOTE that your custom css file should come after Bootstrap css file in your html code to override it.

This works on firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

The CSS code below works to remove this:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Remove dotted outline from links, button and input element.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

You might want to intensify the focus rather than get rid of it.

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

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

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

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

It looks like the only way to achieve this is by setting

browser.display.focus_ring_width = 0

in about:config on a per browser basis.

Simply add this css for select box

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

This is working fine for me.

Tested on Firefox 46 and Chrome 49 using this code.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Before (white dots are visible )

After ( White dots are invisible )

If you want to apply only on few input fields, buttons etc. Use the more specific code.

input[type=text] {
  outline: none !important;
}

Happy Coding!!

This will get the range control:

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

From: Remove dotted outline from range input element in Firefox

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!

Tried most of the answers here, but none of them worked for me. When I realized that I have to get rid of the blue outline on buttons on Chrome too, I found another solution. Remove blue border from css custom-styled button in Chrome

This code worked for me on Firefox version 30 on Windows 7. Perhaps it might help somebody else out there :)

button:focus {outline:0 !important;}

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

The below worked for me in case of LINKS, thought of sharing - in case someone is interested.

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

Cheers!

If you prefer to use CSS to get rid of the dotted outline:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

无需定义选择器。

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

但是，这违反了W3C的可访问性最佳做法。该大纲可帮助那些使用键盘导航的人。

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

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