Removing the Dotted Outline from Focused Links
Have you ever noticed the dotted outline that appears around links as you click on them? That is an accessibility feature for people who can’t use the mouse for whatever reason. It is supposed to show where the current focus is when you use the TAB key to move through a document, and does a fantastic job.

But why does it appear when you are using the mouse to click on a link?
This naturally subtle visual cue has become a convention across all browsers, gently reassuring the user when they have successfully clicked on a link. Without it, users will try again to click a link thinking they missed it—and if the server isn’t immediately responsive they assume the browser is frozen and contemplate closing it.
But for a designer this happens to be particularly annoying on image links, when the dotted focus remains even after you have clicked the link and moved your mouse away from it.
While I am an advocate of using JavaScript to remove the dotted focus from links onMouseDown or onMouseOut, but I would not recommend removing the dotted focus entirely. You still need it to be there when people are using the keyboard.
Remember: This is an accessibility feature, and people who can’t use the mouse for whatever reason depend on it. You know, people who eat and surf the web, like me.
Enough banter, show me the code:
<script type="text/javascript">//<!--
var runOnLoad = new Array(); // for queuing multiple onLoad event functions
window.onload = function() { for(var i=0; i<runOnLoad.length; i++) runOnLoad[i]() }
// hide dotted :focus outlines when mouse is used
// but NOT when tab key is used
if(document.getElementsByTagName)
for(var i in a = document.getElementsByTagName('A')) {
a[i].onmousedown = function() {
this.blur(); // most browsers
this.hideFocus = true; // ie
this.style.outline = 'none'; // mozilla
}
a[i].onmouseout = a[i].onmouseup = function() {
this.blur(); // most browsers
this.hideFocus = false; // ie
this.style.outline = null; // mozilla
}
}
//--></script>
Alternatively, you could remove the dotted outline entirely in favor of a different visual cue. Maybe even one that matches your design. I’ve experimented with color, backgroundColor, and font-size and they were all pretty cool.
Nice tip.
Sweet.
I was just writting about this other day… and with jQuery!
$(“div.navigation a”).each(function(){this.onmouseup = this.blur();});
nice
That’s awesome. I love little features such as this. Thank you
This seems to do a good job:
http://sonspring.com/journal/removing-dotted-links
Great!!!
Nice effort to make it out with out compromising accessibility.
cool tip man.. make this blog more informative..
cool !
thanks!
Nice code dude, may uses it sometime. LD
Without JavaScript the best way to disable the dotted outline is tu enter following tags in CSS:
*:focus { outline: none; }
*::-moz-focus-inner { border: none; }
and then change every
*:hover { … }
into
*:hover, *:focus { … }
and you will be able to browse through links by tab key.
check this out:
a {
noFocusLine:expression(this.onFocus=this.blur())
outline:none;
}
Great job!
you can simply remove the outline form your button ,
you can use onfocus=”this.blur();”
Mike,
Your blog, “Removing the Dotted Outline from Focused Links,” has been really helpful. I’ve been able to use a variation of the code you provided to remove dotted outlines that were visible in Maxthon, IE7, and IE6.
My *html file calls images that need to swap with each onmouseover and onmouseout event.
I found that the following line was preventing the swap onmouseout:
a[i].onmouseout = a[i].onmouseup = function() {
I replaced the line with this one:
a[i].onmouseup = function() {
The change seems o.k., so far. Image swapping seems to work fine onmouseout, and ugly dotted outlines are gone.
Thank you!!!