CSS : How to remove Firefox's dotted outline on buttons and anchor tags

firefox-remove-focus-outline

A quick tip to remove the focus outline in Firefox, that appears when a link or a button is clicked. The focus outline manifests as a grey dotted line around the object and is used as a visual clue for keyboard navigation

Warning : Why you should not remove the focus outline

The focus outline, while an eyesore, is used as a visual clue when a user navigates the web page using their keyboard instead of a mouse. Disabling this can cause accessibility issues for an user using their keyboard.

I personally recommend that when disabling the focus outline, a developer must provide alternate visual clues to support keyboard navigation. The following CSS code when added to your stylesheet will disable the dotted lines for anchor tags, buttons, file upload, select drop down, you can use the same selectors to provide alternate visual clues.


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

If you have any questions or concerns, please feel free to leave a comment.