Remove Firefox’s Active Link Focus Outline


16

Sep

POSTED September 16th, 2009 by Micah

Firefox adds a dotted outline to any link that gets clicked, and it remains there until the new content loads. In most cases it doesn’t really matter, but for designers it has always been a bit of a nuisance. It is even more of a problem if you’re using JavaScript triggered by a traditional link to make something happen on the page. In that case the outline will just hang out until another link gets clicked, and so on.

It’s easy enough to remove altogether with a bit of CSS that I found on a blog called Keep the Web Weird, and I’ll be adding this to my browser reset CSS files from now on:

*:focus {
  outline: none;
}

I had never heard of the “outline” property so I ran it through the validator and sure enough it’s valid CSS!

  • Thanks. Exactly what I was looking for.

  • Hi Micah,

    Regarding the outline property, I know it’s a little annoying for visual effects, but it’s probably best to not remove it for accessibility reasons.

    Here’s a quick article that states how to remove it also, but gives a few more details why it shouldn’t be removed. http://css-tricks.com/removing-the-dotted-outline/

You can follow any responses to this entry through the RSS 2.0 feed.