CSS

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

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;
}

[tags]css, stylesheet, tip, www [/tags]

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

  1. 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.

  2. 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
    }

  3. Hi jab,

    Try this:

    a {
    outline: none;
    }

    If that doesn’t work, try:

    a:focus {
    outline: none;
    }

  4. 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.

  5. 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!

Comments are closed.