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! :)
26 responses to “Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines”
#1 and #3 don’t seem to work in Firefox 3.0. I’ve just made a nice new jQuery one that’s based on the principles of #2. This works in IE6, and retains outlines for keyboard tabbing:
// Remove focus outlines$("a").keypress(function() {this.blur();this.hideFocus = false;this.style.outline = null;});$("a").mousedown(function() {this.blur();this.hideFocus = true;this.style.outline = 'none';});If you don’t want the tab navigation, just remove the second segment. You’ll end up with this:
// Remove focus outlines$("a").mousedown(function(){this.blur();this.hideFocus = true;this.style.outline = 'none';});Naturally this goes in the usual jQuery ready event.
It’s not had much testing in the wild as I literally just wrote it and gave it some preliminary testing, but maybe someone’ll find a use for it. :)
Great post Jeff.. I have always been bothered by the outlines and always wondered how to get rid of them. I never researched it myself but it is nice to know there are several methods to do so. Thanks!
I have just these one liners;
in my css:
a { outline: none }and in my jQuery js:
$('a').click(function() { $(this).blur(); });And then some nicer styled focus/active styles in the css.
@HR Software: My pleasure! Glad you found the article useful :)
@Ryan Williams: Very nice! Using jQuery is a great way to deal with unwanted focus outlines in IE6 (and other browsers), while the CSS method serves as a good fallback. For IE6, I guess the targeted removal of unwanted link borders falls in the category of progressive enhancement. Thanks for sharing the jQuery method! :)
@Paperboy: That is an excellent strategy — covers all cases when JavaScript is available, and still works on all browsers except IE when it’s not. Thanks for the feedback! :)
Keep in mind, that removing the nasty focus outline, using an onfocus even (javascript or css) your links won’t be “accessible”, you can’t navigate to the link using the tab key. Personally i use this pretty often, when working at my laptop (such as now) It does have a touchpad of course, but i tend to use keyboard navigation instead.
Using the onclick event links will still be accessible, and the focus border will be removed once the link is activated, I’m not completely sure if you navigate back in the browser history, if the link then will remain focused. Also i’m not sure if you can access the onclick stuff using a pure css approach, but it is possible with javascript, either jQuery or just plain unobtrusive technique.
Yeah, as above, removing the outline is a pretty bad idea in terms of accessibility. Maybe removing it from large image/navigational links is okay, but not from all links in a page.
Very timely post. I am using a jQuery “scroll to top” and just needed to lose focus on my link when it was fired since it doesn’t actually refresh the page.
$('.backtotop').click(function(){$("body,#container").fadeTo(1000, 0, function() {$('html,body').animate({scrollTop: top}, 0);}).fadeTo(1000, 1);$("a").each(function(){this.blur();});});One quick Google search got me out of that “now how do I do that again?” state.
Thanks
Great post, Jeff. I recently blogged about using an approach similar to #1 to compensate for IE7’s poor support for the :active pseudo class on anchor tags.
@Patrick: Just read through your article and must say that it is much appreciated. I will be digging deeper into the concept to better my understanding and then testing out a few demos later this week back in the (cross-browser) labs. This will definitely come in handy on future projects. Thank you! :)
None of the methods shown here work the way they should in IE7.
Using Javacript does remove border when mouse events are involved but not for keyboard events. In both cases the active color (when the element is actually selected either by tabbing to it or clicking and holding the button) is missing.
Oh and the URL is not shown when tabbing through the document in the status bar when you use noFocusLine method.
Oh and the javascript onmouseout() part has the side-effect of resetting the focus to the first element on the page if you hover over the selected link and then move the mouse out.
@Igor: Ah, good ol’ Internet Explorer. Thanks for sharing this information — I certainly will be looking into it.
Thanks, that was helpful.