hasLayout.net

Description

Dotted border appears on clicked links - what is it about and how to deal with it

Date of the Tutorial

Sun Aug 16 22:00:27 2009

Overview

Yes, yes, I know, there are a ton of tutorials online that show a simple "solution" for this "dotted border around clicked links". However, I am yet to see a tutorial that does not treat this accessibility feature as a "bug" or at least describes why that border appears when one clicks a link.

In this tutorial I will try not to take any sides; removing the border decreases your site's accessibility and not removing it makes things look "ugly". I will explain why that border appears, what it is for and how to remove it - it will be up to you to decide on how to deal with the problem.

Why Do We Have That Dotted Border?

You create a stunning graphical navigation and you style up your links nicely for it. You click the link and during that moment from the click until the next page loads you see a funny looking dotted border around the links. Moreover, if you're using text-indent to hide the actual text from the links you may see that that border extends through the entire page (just add a { overflow: hidden; } to fix that). You decide that the border is "ugly" and you go off trying to figure out how to get rid of it, but have you ever asked yourself why that border is there? Let's take a look at what I am talking about first:

HTML Code:

<ul>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
</ul>

Keeping Up With Usability - Style

Before you butcher your page and completely remove that outline, even with the knowledge that it's a usability feature, let's look at the options. That outline is stylable in every modern browser! Unfortunately, IE7 are not modern browsers, so let's skip them in this section. Let's take a look at the demo:

HTML Code:

<ul>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
</ul>

CSS Code:

a:focus {
    outline: 4px solid lime;
}

We have used the outline property that functions much like border except it doesn't affect surrounding elements. We have applied it to :focus pseudo-class and now upon clicking the link or TABbing through them instead of a wimpy dotted border we get a thick, lime-colored outline. Depending on your setup, styling the "dotted border" instead of getting rid of it completely may even improve the look of your page. The border does not have to be dotted or a solid line, take a look at outline-style property... don't use the none style just yet, keep on reading

Keeping [Almost] Everyone Happy - JavaScript To The Rescue

There are not that many people left who have JavaScript disabled, and those who do, would sure not care about that silly "dotted border". Since the usability part of this dotted outline on links (and buttons) involves the keyboard and it "looks ugly" only when you click the link, why don't we put the two together and think up a solution that would get rid of the border during clickety but keep it for all the l33t dudes who perfected their keyboard browsing skills? Let's have a look:

HTML Code:

<ul id="nav">
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
</ul>

CSS Code:

a:focus {
    outline: 4px solid lime;
}

JavaScript Code:

var links = document.getElementById('nav').getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
    links[i].onmousedown = function () {
        this.blur();
        return false;
    }
    links[i].onclick = function() {
        this.blur();
    }
}

First of all, I'd like to note that in IEs (even IE8) this method does not work all that perfectly as the "dotted border" (and styled outline in IE8) show up during the actual click, read the next section on how to fix that.

I've added an id="" attribute to the container of our links for me to be able to localize the effect of the "dotted border" removal with JavaScript - seriously, just let it be in other places. The CSS code stayed the same, we just added a thick lime border instead of the dotted one; you don't have to actually do that, but I think it would look more pretty if you style that outline somehow for browsers that support that.

The JavaScript code is pretty straight-forward. Since the "dotted border" is styled on :focus we are simply removing that focus with this.blur(). Sane browsers are pretty happy with just the .onmousedown. I've added the .onclick to ditch the "dotted border" in IE; however, as I already mentioned, it still shows up during the actual click.

Screw IE! I Want The Border Gone!

Alright, the "dotted border" is still a bother in IE browsers. What to do? Why don't we go ahead and butcher the usability for only IE browser and keep our super-duper usable "dotted border" removal solution for sane browsers? Let's have a look at how we're going to do that:

The demo is shown on a separate page

HTML Code:

<ul id="nav">
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
    <li><a href="#">Click me to see that border</a></li>
</ul>

CSS Code:

a:focus {
    outline: 4px solid lime;
}

JavaScript Code:

var links = document.getElementById('nav').getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
    links[i].onmousedown = function () {
        this.blur();
        return false;
    }
    links[i].onclick = function() {
        this.blur();
    }
    if ( /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent) ) {
        links[i].onfocus = function() {
            this.blur();
        }
    }
}

Everything stays the same as in previous demo with the exception of an extra piece of JavaScript code. What we are going here, is detecting if the browser is an IE browser and if that's the case, we are removing focus from focused links (using .onfocus event handler). This will break the keyboard usability, but it will only happen in IE browsers - can't keep everyone happy, now can we?

I Am The Victim - The Other Side of The Chessboard

There are a lot of sites that boldly use a {outline: 0;} to get rid of the "dotted border", so what to do if you are the person who needs it?

The answer is user sheets. Most sane browsers allow the user to specify their own style sheet that will be included along with the page's styles. You'll have to figure out how to set that sheet on your own. All I can say that in Firefox on Linux you'd want to edit ~/.mozilla/firefox/your_profile/chrome/userContent.css (copy the sample from userContent-example.css that is located in the same directory). The code that you would want to put in there is as follows:

CSS Code:

:focus {
    outline: 5px solid blue!important;
}

Note that I used :focus and not a:focus; this is for affecting not just the links but form elements, such as submit buttons, as well. Secondly, I've added !important keyword to modify the specificity of the rule to override whatever the author of the page has set. You are now all set!