Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines

I recently wrote about how to remove unwanted link outlines using a pure-CSS method that works on every modern browser except (wait for it) ..Internet Explorer 6! Yes, that’s right, another reason why (almost) everyone is pushing hard to eliminate Internet Explorer from existence.

Nonetheless, removing those pesky unwanted link outlines in IE6 is not possible with CSS, but it’s a snap with a little JavaScript. Here are four unobtrusive JavaScript techniques (plus one CSS-only method thrown in for good measure) for removing unwanted focus outlines.

1. Simplest Method

I use this method on a number of different sites. It works great in IE6, and just about every other browser in which I have tested it. Place the following code in your external JavaScript file for easy, unobtrusive functionality:

// Unobtrusive JavaScript: Remove Unwanted Link Border Outlines
// @ https://perishablepress.com/press/2008/12/16/unobtrusive-javascript-remove-link-focus-dotted-border-outlines/

if(document.all)
for(var i in document.links)
document.links[i].onfocus = document.links[i].blur;

Nothing more needs to be said here. The code loops through all links on the page and removes focus outlines via blur. Just works. ;)

2. Advanced Method

This advanced outline-removal method is from Mike Smullin, where the code is provided in single-line format. After restoring proper formatting structure to the code, it looks like this:

// Unobtrusive JavaScript: Remove Unwanted Link Border Outlines
// @ http://www.mikesmullin.com/2006/06/16/removing-the-dotted-outline-from-focused-links

var runOnLoad = new Array();
window.onload = function() {
	for(var i = 0; i < runOnLoad.length; i++) runOnLoad[i]() 
}
if(document.getElementsByTagName)
for(var i in a = document.getElementsByTagName('a')) {
	a[i].onmousedown = function() { 
		this.blur();                 // most browsers 
		this.hideFocus = true;       // internet explorer
		this.style.outline = 'none'; // mozilla
	}   
	a[i].onmouseout = a[i].onmouseup = function() { 
		this.blur();                 // most browsers 
		this.hideFocus = false;      // internet explorer    
		this.style.outline = null;   // mozilla 
	}
}

The benefit of this so-called “advanced” method is that it removes the dotted focus outlines for mouse events, but displays them when for tabbed navigation. Apparently, this method works in all browsers, but I have yet to verify this. Again, to use this code, simply place it into your external JavaScript file and you are good to go. No editing required!

3. jQuery Method

Of course, removing focus outlines is also possible using jQuery. To target all links, use this:

$("a").each(function(){this.onmouseup = this.blur();});

Otherwise, to target a specific link or set of links, edit the first “a” parameter to reflect the targeted selectors (works just like CSS). For example, to target all links in the header <div>, throw down:

$("div#header a").each(function(){this.onmouseup = this.blur();});

Place this code in your external JavaScript file and say goodbye to unwanted dotted link outlines.

4. CSS-Expression Method

An interesting method with which I experienced mixed results employs the following CSS expression:

a { /* remove unwanted focus outlines from links */
	noFocusLine: expression(this.onFocus=this.blur())
	outline: none;
	}
*:focus { 
	outline: none; 
	}

To try this method, edit the selector as desired (and if needed) and place into your site’s CSS file. The CSS expression removes the focus outline in Internet Explorer 6, while the wildcard declaration affects all other (modern) browsers. Note: I would be interested in hearing your results with this method..

5. Pure CSS Method

For the sake of completeness, here is how to remove unwanted focus outlines from links using only CSS:

*:focus { 
	outline: none; 
	}
*::-moz-focus-inner { 
	border: none; 
	}

No JavaScript required, but of course this method will not work in everybody’s favorite browser, IE6. Should work great in all modern browsers, however.

Let’s blow this taco stand!

Although the hardcore accessibility puritans insist that you should never remove focus outlines (even unwanted ones) from links, every design is different and requires a different palette of functionality, presentation, and behavior. The next time you need to unobtrusively obliterate some pesky link outlines, just throw down one of the above techniques into your favorite external JavaScript file and enjoy the results: clean, borderless link outlines throughout the page! Just remember to re-style the focused state with alternate properties according to your particular design needs.

Accessibility is very important, and a measurable percentage of users rely upon those dotted link borders to successfully navigate the page. Even so, there are always cases where borderless links are appropriate or even required. Hopefully these 5 4 JavaScript methods will prove useful in such circumstance. Enjoy! :)

About the Author

Jeff Starr = Web Developer. Security Specialist. WordPress Buff.