blog

Remove the Firefox outline on anchor, button and :focus elements

March 31 2010 by Joseph Smith

Mozilla gets most things really, really right. However, one of the minor annoyances is the outline that Firefox places on every <a>, <button> and :focus element. Utilizing the Gecko specific pseudo-selector ::-moz-focus-inner and some standard CSS you can rid yourself of this pesky problem.

Just put this in your with your other CSS resets.

a, :focus {
   outline: none;
}
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: none;
}

You do have a good set of CSS resets in place right? If not, maybe you should read this...

Great! Do you happen to have

Great! Do you happen to have a similar trick that will remove the dotted outline of a dropdown box that has focus?

Joseph Smith

Joseph Smith

Joseph currently works full-time as a developer for Legwork Studio in Downtown Denver, CO.

In his past life, he was a touring musician and turned screws on/repaired Apple hardware.

Tags