Celebrating 20 years online :)
Web Dev + WordPress + Security

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/

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]() 
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 = Designer. Developer. Producer. Writer. Editor. Etc.
Blackhole Pro: Trap bad bots in a virtual black hole.

26 responses to “Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines”

  1. Ralph Hams 2011/10/14 7:51 am

    “hardcore accessibility puritans”

    … as well as nearly all successful corporations, companies (clients) that don’t want to be sued for ADA non-compliance, and people who cater their websites to a large audience would also fall into this group. Using outlines to enable access and usability on websites isn’t some fringe cult, it is web development 101.

    Deciding to keep or remove borders is always up to the project/site/individual, but by framing the decision as you have, you are doing a disservice to junior developers who stumble upon your site trying to understand why these outlines are appearing on their webpages.

  2. Jeff Starr 2011/10/14 8:45 am

    Hi Ralph, did you bother to check the date on the post before commenting? It’s nearly three years old, a virtual lifetime in this field. Back then, the “accessibility” thing had yet to hit the mainstream. But now that it has, it’s good to see that the general mindset hasn’t changed.

    Either way, thanks for the great example of what I’m referring to in the post – gonna have to link to your comment from your chosen quote.

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Digging Into WordPress: Take your WordPress skills to the next level.
Crazy that we’re almost halfway thru 2024.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.