CSS: Removing that dotted line around a link
Published December 4th, 2009Just a quick note to myself…
I’m working on a navigation system that uses CSS image replacement. To hide the text, CSS shifts it out of view by using the text-indent property and a big negative value. However, a side-effect of this is that when you click on a link, the dotted border that appears while you’re holding the mouse button down goes off the side of the page.
To get around this, I just wanted to disable it. After some searching I discovered the outline property — setting this to ‘none’ gets rid of it entirely:
a{
outline: none;
}
Of course, the above will remove it for all links, it’s up to you to decide whether you want to make it more specific.
Nelson Menezes on December 4, 2009
A note on accessibility though: make sure you’re careful with this; you don’t want to completely remove the focus indicator from all links or keyboard users will have a hard time.
Also, remember that some users with poor eyesight will have background images disabled for improved contrast so it’s still a good idea to provide some additional visual marker for focus (e.g. underline, bold, border…)
Stickman on December 7, 2009
All good points, thanks.