Living life…the cool way !

Removing the outline around a linked element in HTML

leave a comment »

Having slipped into a small piece of fact while surfing tonight, i felt this really should find a place in my blog right here. Well, the center of attraction now is the small little outline that appears around any links when focussed. (Refer to the image for clarity)


The outline that comes around the image is what we are exactly talking about. It would have been great at times to get rid of that annoying border out of the link, as nowadays we not only use an anchor tag to take users to other pages (with the advent of more usage of scripts and more UI tools and libraries like jquery)

We can get rid of the outline in Firefox using a simple CSS code which is:

  1. a:focus, a:active {
  2. outline: none;
  3. }
But again, this is not possible in IE using the same technique. For this, there is an alternate if we use jquery (a javascript library-im excited that ill be posting some series of posts relating to jquery later on).
The trick is to take the focus off the link once it has been clicked, and jQuery makes that simpl enough to implement. The following piece of code in jquery does the trick for us and gets rid of the outline forever 🙂
  1. $(‘a’).click(function() {
  2. this.blur();
  3. });

for those unaware of the magic of jquery, ill be posting some soon. Btw, im also a newbie into this technique, but am slowly catching up. Lets expect some useful posts following this. Till then, happy CSSing. 🙂

( Courtesy: )


Written by Ranjith

March 26, 2008 at 10:06 pm

Posted in UI

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

%d bloggers like this: