How to remove Firefox's dotted outline on BUTT

Question

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)

Answer 1

This works on firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Answer 2

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

Answer 3

[Update] This solution doesn't work anymore. The solution that worked for me is this one https://stackoverflow.com/a/3844452/925560

The answer marked as correct didn't work with Firefox 24.0.

To remove Firefox's dotted outline on buttons and anchor tags I added the code below:

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;
}

I found the solution here: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Answer 4

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!!

Answer 5

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

Answer 6

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!