How to remove dotted border around active hyperlinks in IE8 with CSS
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?
Solution 1:
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.
Solution 2:
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.
Solution 3:
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.
Solution 4:
a:active, a:focus {
outline:none;
}