How to remove dotted border around active hyperlinks in IE8 with CSS

Question

Active hyperlink texts are highlighted with dotted border. When using effects on such hyperlinks (fadeIn/fadeOut) it produces strange effects. How do I disable/remove the dotted border?

Answer 1

Try this CSS:

a:active { 
    border:none;
    outline:none;
}

Note that this has to be after any a:hover rules.

Answer 2

Be careful. The dotted-border is a valuable part of keyboard-browsing. It highlights which link will be clicked.

a:active { outline: none; }

Author Nathan Smith gives a more thorough discussion of this, and various related issues on his blog.

Answer 3

Typical and safe way to do it is this (in non-IE and IE6-7):

a:active, a:focus {
   outline:  none;
   ie-dummy: expression(this.hideFocus=true);
}

Since expresssion() has been gutted in IE8, you may need a script:

if (document.documentElement.attachEvent)
    document.documentElement.attachEvent('onmousedown',function(){
         event.srcElement.hideFocus=true
    });

If you're going to remove default focus outline, you must define your own distinct style for :focus, otherwise keyboard users will have hard time using your site.

Answer 4

The a { outline: none; } breaks keyboard usability. And the a:active {} selector seems to break it just as good last time I checked in Firefox.

There is a JS way to get rid of the border without breaking anything as well as JS code to get rid of the border in IE6 and IE7..

I described the method in my tut: http://haslayout.net/css-tuts/view?tut=Removing-Dotted-Border-on-Clicked-Links

Cheers!

Zoffix Znet

Answer 5

People. Sometimes there is a certain place where the dotted line completely ruins the style of the page. You have to be able to remove it in those instances. I have other links that will work for the keyboard users but in the logo I do NOT want the dotted line ruining the style.

Answer 6

Hola a todos, contestando la pregunta de Vnuk, prueba agregar estos css entre tus estilos para corregir los bordes punteados de los links y botones en Mozila... ¡¡Suerte!!

*|*:-moz-any-link:focus {
  outline: none;
}

*|*:focus
{
  outline: none;
}

button, input[type="reset"], input[type="button"], input[type="submit"] {
  outline: none;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  padding: 0px 2px 0px 2px;
  border: 1px dotted transparent;
}

Answer 7

Hi, try with these css:

FOR MOZILA:

|:-moz-any-link:focus { outline: none; }

|:focus { outline: none; }

button, input[type="reset"], input[type="button"], input[type="submit"] { outline: none; }

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px 2px 0px 2px; border: 1px dotted transparent; }

---

For IE8

a:active, a:focus { border:none; outline:none; }