When I click on a link, most browsers draw a dotted box around it. How can I prevent this?

Question

When I click on a link, most browsers draw a dotted box around it. It's easiest to see if the link is opened in a new window, since the original page sticks around.

Can this be stopped?

Answer 1

Put this in your CSS

-moz-outline: none;
outline: none;

Here's a more detailed breakdown and a related question

Answer 2

http://css-tricks.com/removing-the-dotted-outline/

better use:

a:active {   
    outline: none;
}

or

a { 
    outline: none;
} 

it's more specific. otherwise you might suppress too many things at once. and if you care for accessibility make sure to give the users who can't use a mouse some other way of knowing which link is active or focused.

Answer 3

One option is to use the javascript blur function on the link after it's been clicked. The blur function removes focus off the link so it won't be drawn with that dotted box around it.

If you're using jQuery, then you could implement such a solution like this:

$(function() {
    $('a').click(function() {
        $(this).blur();
    });
});