CSS: Removing that dotted line around a link

Published December 4th, 2009

Just 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.

Get a Trackback link

4 Comments

  1. 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…)

  2. Stickman on December 7, 2009

    All good points, thanks.

  3. Bob on April 27, 2010

    Woah man! Your a n00b.

  4. Stickman on May 28, 2010

    :)

Leave a comment

Comment Policy: First time comments are moderated. Please be patient.

OpenID

Anonymous