Blur links with jQuery

While surfing the Web, you probably noticed the dotted outline, that appears when you click on the link. If your link doesn’t lead to another page, but instead triggers some event in the same page, outline stays there and looks ugly.

For modern browsers you can remove it with simple css:

a:focus, a:active {

Unfortunately, this won’t do for IE 6 and earlier.

With jQuery it’s easy to get rid of the outline in every browser that has JavaScript enabled:

$("a").click(function() {

This will remove outline from the link once he is clicked. You will see the outline when clicking, but it will not stay there.

If you don’t want to se the outline at all replace click event with focus event:

$("a").focus(function() {

To find more about jQuery Events visit

6 thoughts on “Blur links with jQuery

  1. I recommend the second option on this post. The other two do not take into account accessibility standards for environment with only keyboards.

    If you remove the outline completely, you cannot navigate through links by using the ‘Tab’ key, since you don’t know where you are. By removing on “click” event, you allow navigation using ‘Tabs’ and also leave your page looking as you designed it.

    Great post.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s