Firefox places a border around links, buttons and other focus-able elements. The purpose of this is to visually mark the focused element, this is useful when using the “tab” key to go through navigational items. However on a nicely designed page it just looks plain ugly. Trying to get rid of Firefox dotted line can sometimes be tricky. If you encounter this for the first time you might have a harder time figuring out how to get rid of the Firefox dotted line. The following lines did the trick for me.
a:hover, a:active, a:focus, a:link, a:visited {
outline: 0;
outline: 0 !important;
outline-style:none;
}
button, object, embed {
outline: 0;
}
/* All Input elements */
input::-moz-focus-inner {
outline: 0;
}
/* Or more specifically*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner{
outline: 0;
}
The question how to get rid of Firefox dotted line has been raised on the Mozilla support forum and Stack overflow, check out their answers as well.
Please let me know if this article helped you, share your thoughts in the comment section below, and help me improve this article.
Out of all the google links your solution was the one that delivered. I wonder why it is so that we need to include both outline: 0; and outline:0 !important;
Do older versions of Firefox ignore one or the other?
Cheers
Robert,
I am really glad you found my code snippet useful. Some solutions I found online were missing “a:focus” which is really the key. Indeed you do not need both lines for firebox, only `outline:0 !important;`. Its more of a reflex for me to double any rule with !important in it for IE 6 support.
Cheers
Thank you so much for this precious help, God bless you!
Hi Frédéric,
You are more then welcome, God bless you too.
Lehel
Hi!
Where can I input this code for it to work?
Hi Toms!
You have to put it in the CSS file that is included in your website.
Put a link to your website in the comment and I can help you further.