Web Development Blog

Web Development » CSS » How to get rid of tracing dotted line on a:active with CSS

19 Feb, 2007

How to get rid of tracing dotted line on a:active with CSS    

You know those tracing dotted lines (see above) which appear when you click on a link? I found out not too long ago that you can get rid of them easily just by adding the following into your stylesheet file.


a {
outline: 0;
}


Technorati Tags: css, stylesheet, tip, www

Found this article useful? Share it with your friends:

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.

Your name:   Your email:  

Other similar posts that you might be interested in:

• Some simple but effective CSS rules for IE 6
• How to use Google Fonts in your WordPress Theme
• How to customise WordPress Admin Login page
• Conditional IE Comments (to detect IE browser / IE browser version)
• How to use hi-res images in web apps for iPhone4
• 10 tips I have learned from WDS2007 – Day 1
• Enabling gd image library in PHP (Windows)

13 Responses to “How to get rid of tracing dotted line on a:active with CSS”

1. steve says:

   February 20, 2007 at 11:41 pm

   Only works in IE?
2. eisabai says:

   February 21, 2007 at 8:38 am

   Hi steve,

   I don’t think it’s applicable for IE as you don’t see tracing dotted lines like that in IE. It’s mainly for FF.
3. jab says:

   April 5, 2007 at 8:03 pm

   Yes, it only works in IE. FF still has the tracing lines. I cannot get rid of them… and it is annoying.

   My style sheet looks like this:
   .a {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #999999;
   text-decoration: none;
   outline: none
   }
4. jab says:

   April 5, 2007 at 8:04 pm

   any cures would be awesome
5. eisabai says:

   April 5, 2007 at 8:29 pm

   Hi jab,

   Try this:

   a {
   outline: none;
   }

   If that doesn’t work, try:

   a:focus {
   outline: none;
   }
6. jab says:

   April 6, 2007 at 5:40 am

   the a:focus tag worked…PERFECTO!

   thanks!
7. eisabai says:

   April 6, 2007 at 9:50 am

   You’re welcome.
8. Bee says:

   May 26, 2008 at 2:21 pm

   Any ideas on how to get rid of the same problem in FF on an input submit button?
9. eisabai says:

   May 29, 2008 at 8:43 pm

   Hi Bee,

   If you’re talking about the dotted line that you see when you click on an input button, I don’t think we can control that in CSS. However, you might be able to get around it by using an image instead of an input button.
10. Amy says:

    August 31, 2009 at 12:21 pm

    Thanks so much – this was driving me nuts as I was using two images for links on a new site’s landing page. I had tried all the border:none and 0px commands I could think of. Testing in FF, and the a {outline:none;} did the trick right away, but I added in the a:focus as well. Site looks much better now!
11. Greg says:

    September 3, 2009 at 2:53 am

    All you need to do is add outline: inherent;
12. Mike says:

    September 5, 2009 at 2:23 am

    For me that

    a { outline: 0 }

    did it for all FF in Linux, Mac, Win.

    Thank you!
13. Tim says:

    November 20, 2009 at 2:11 am

    Very helpful. Just started using Cufon and this was really annoying me.