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;
}
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)
Popular Answer
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.
Read more... Read less...
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;
}
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!
[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
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;}