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 = Creative thinker. Passionate about free and open Web.
The Tao of WordPress: Master the art of WordPress.

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

  1. Method 1 DOES NOT WORK in native IE6.

  2. Hi Jeff, me again…
    Found this post through a forum link, coz I had this issue here concerning IE7 and below. The following worked for me:

    inclusion via conditional comment:

    <!--[if lt IE 8]>
          <script type="text/javascript" src="ie7blur.js"></script>


    (function($) {
          jQuery(document).ready(function($) {
                      this.hideFocus = true;

    Kind regards, mtness.

  3. David Quick 2010/11/14 5:02 am

    You could use $("#MyDiv a").each(function(){ $(this).css('outline', '0');});

  4. It was great to find this discussion, but unfortunately, none of the suggested methods for removing unwanted dotted outlines in IE6 have worked for me.

    I have a similar question posted at http://www.scriptiny.com/qa/2302/remove-dotted-outline-that-appears-mouse-click-maxthon-ie6. I’m trying to remove the same dotted outlines that display in IE6, IE7, and in Maxthon, in links that form a dropdown menu.

    Is there a way to email or upload some sample files?


  5. The ugly dotted white outlines appear in Maxthon, IE7, and IE6 when a link gets clicked with the mouse. They remain even after the new html page opens as a result of the click. Using the browser’s “Back” button, a viewer can return to the page that displays the link that was most recently clicked. The unwanted outlines remain…
    Is some kind of script needed for a: visited and a: active as well as *:focus?
    Still hopeful —

  6. Jeff Starr 2011/08/22 3:51 pm

    Hi hopeful, I would love to help, but I no longer test for IE6/7 so I’ve no way of checking. Hopefully someone with access to that old stuff will be able to help out. Good luck :)

  7. Hi Jeff,
    Thanks for the quick response —
    Much appreciated.
    I don’t blame you —
    If folks have access to Maxthon, the problem can be seen in that browser, as well…
    For IE6 and IE7, I use Microsoft Virtual PC…Maybe I should just give up on these extremely painful older browsers!!?

  8. Problem solved —
    I used a slight variation on the code that Jeff offered above under the heading, “2. Advanced Method” and at http://www.mikesmullin.com/?p=23.

    I have images that need to swap with each onmouseover and onmouseout event.

    The following line was preventing the swap with each onmouseout event:

    a[i].onmouseout = a[i].onmouseup = function() {

    I replaced this line with the following line:

    a[i].onmouseup = function() {

    So far, I haven’t noticed any problem resulting from this change, and the unwanted dotted outlines that were previously visible in Maxthon, IE7, and IE6 are now not visible.

    Thanks, Jeff, for posting your article and for creating this discussion page.

  9. Jeff Starr 2011/08/25 9:30 am

    hopeful, glad to see you found a solution to this, and thank you for taking the time to follow up with it. I know it will help others in the community who might be dealing with the same issue. Cheers :)

  10. Thank you for the post. Your solution worked.

  11. Nur den kleine Snippes in die CSS und alles ist OK

    IE//6 CSS

    a.hideFocus {
       text-decoration: expression(hideFocus='true');

  12. Jeff Starr 2011/10/04 8:37 am

    Danke werner – es ist sehr gut!

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 »
BBQ Pro: The fastest firewall to protect your WordPress.
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.