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 do

Answer 1

Try with this CSS:

For Mozilla:

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

Answer 2

a:focus, *:focus {
    noFocusLine: expression(this.onFocus=this.blur());
}

Taken from here: http://www.cssjunction.com/css/remove-dotted-border-in-ie7/

Answer 3

you can also use outline:0 on object and embed. some basic zeroing out css would look like this:

a, a:visited { 
    text-decoration:none;
    color: #e3a512; 
    }
a:hover, a:active, a:focus { 
    text-decoration:none;
    color: #fff;
    outline:0;
    }
object, embed, a, a img, a:active, a:selected, a:visited {
    outline:0
    }

Answer 4

Typical and safe way to do it is this:

a:active, a:focus {
   outline:  none; /* non-IE */
   ie-dummy: expression(this.hideFocus=true); /* IE6-7 */
}

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 the default focus outline, you must define your own distinct style for :focus, otherwise keyboard users will have a hard time using your site.

Answer 5

Solution in JavaScript to remove the active border on the links on all the browsers: add the event onfocus="this.blur();" on your link

<a href="#" onfocus="this.blur()"> Link </a>

NOTE: this will work in all browsers.

Answer 6

Try this CSS:

a:active, a:selected, a:visited { 
    border: none;
    outline: none;
}

Note that this has to be after any a:hover rules. Thanks to PEra in the comments for suggesting using the a:selected selector as well.

NOTE

The above does not work in IE 9. Removing a:selected causes it to work in IE9.