Monday, October 6, 2008

Get rid of the dotted outline in Firefox

I paid very little attention to the dotted outline you see in Firefox when one clicks on a link until a design centric client asked me to get rid of it. At first I thought he was crazy but then I came to find it was only a matter of CSS... very easy.

As you can find out, there are many variations of CSS to accomplish getting rid of the dotted outline.
This page on sonspring.com describes in detail the reasons to do one or the other. You can even make it a permanent change for all web sites you visit by changing the Firefox application's base CSS file.

So the quick and dirty follows and explains my favorite method... add it to your CSS file!

"If you want to retain the dotted border for tab-based navigation, apply this to a:active. This still allows the indicator to appear when focused by keyboard, but hides when mouse activated. It’s the best of both worlds…"

a:active
{
outline: none;
}

No comments: