Aug
09
2007
CSS: Removing dotted outlines on clicked hyperlinks

No matter how much you know about CSS, you can always stumble across something new.

I was pretty much unaware of the “outline” style attribute - which isn’t really a big deal, because in most ways it works the same as the “border” attribute.

Except…

The “outline” attribute is what’s responsible for drawing the little dotted boxes around hyperlinks when they are clicked or navigated (tabbed) to via keyboard (I always thought it was strictly a OS-level effect). Anyway, if they’re a visual blight on your sight, you may be inclined to try this:

a { outline:none }

However, that would make keyboard navigation nearly impossible. Don’t do it. If you just want to avoid them on active (clicked) links, just throw this in your CSS file:

a:hover { outline:none }

And there you go. Huh. Thanks to my pal Matt D. for the tip.

This entry was posted on Thursday, August 9th, 2007 at 9:41 am and is filed under The User Experience, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “CSS: Removing dotted outlines on clicked hyperlinks”

Leave a Reply

Related Posts: