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?

score 59 · Accepted Answer · edited May 23 '17 at 11:59

59

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.

edited May 23 '17 at 11:59

Community

1
1

answered Jul 17 '09 at 11:58

Lucas Jones

19,767
8
75
88

For me, this works in IE8, but FF3.5 ignores it. It still shows dotted border when link is active. Any ideas? – Vnuk Sep 16 '09 at 17:43
2

Ignore, I found that FF ignores this css :( – Vnuk Sep 16 '09 at 19:02
I'm really not sure; perhaps the other answers on this question would be of more help to you. – Lucas Jones Sep 17 '09 at 17:55
1

I had to set these for a:visited, too. – PEra Aug 16 '10 at 08:17
3

a:selected appears to not work in IE9. Removing that selector from the snippet above did the trick for me. – Zack Mar 19 '12 at 05:40
In Firefox you can do this: :-moz-any-link:focus { outline: none; } – Jason Shultz Jan 25 '13 at 22:13
`a:selected` didn't work in IE8 for me - replaced it with `a:focus` – Tim May 16 '13 at 12:03
@Zack I also had to remove `a:selected` to work on Internet Explorer 8. – Francisco Corrales Morales Apr 16 '14 at 17:39
[Don't do this though](http://www.456bereastreet.com/archive/200905/do_not_remove_the_outline_from_links_and_form_controls/) – Quentin Apr 24 '14 at 07:52

Kornel · Answer 2 · 2015-09-29T23:21:28.827

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.

Sampson · Answer 3 · 2009-07-17T12:26:04.917

15

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.

edited Jul 17 '09 at 12:26

answered Jul 17 '09 at 11:59

Sampson

265,109
74
539
565

2

Might want to say keyboard browsing rather than tabbed browsing. – Alistair Knock Jul 17 '09 at 12:14
Yes, it is must for accessibility, for the people with disabilities. – Kunj Dec 24 '15 at 05:14

score 12 · Answer 4 · edited Aug 21 '11 at 17:11

12

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

edited Aug 21 '11 at 17:11

CoolBeans

20,654
10
86
101

answered Jun 03 '11 at 04:06

Frankie Jarrett

494
7
11

1

Welcome to SO! Please try to be a little more explicit in yours answers. It is perftly correct, but lake of a bit of information. Also you can use the format function for code. and again, welcome to SO ! – Loda Jun 03 '11 at 08:58

score 10 · Answer 5 · edited Mar 14 '11 at 04:08

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

score 3 · Answer 6 · edited Mar 14 '11 at 04:10

3

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

edited Mar 14 '11 at 04:10

Jason Plank

2,336
5
31
40

answered Aug 17 '09 at 23:46

@Barney, sure enough, he didn't do that and now his code is gone lol – toddmo Sep 02 '15 at 20:30

score 3 · Answer 7 · answered Jan 31 '13 at 15:45

3

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.

answered Jan 31 '13 at 15:45

Paulo Roberto

31
1

css was not working for me in cordova app, and it worked – Sandeep Kumar May 15 '15 at 14:19
This is the only method I found that worked for buttons in IE9. I was going to give up already. Thanks a lot! – user21820 Dec 18 '15 at 05:44

score 2 · Answer 8 · edited Mar 06 '13 at 09:37

2

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

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

edited Mar 06 '13 at 09:37

nhahtdh

55,989
15
126
162

answered Mar 06 '13 at 09:02

eva

29
1

score 2 · Answer 9 · answered Apr 01 '13 at 20:57

2

This one works the best for me

a{
  outline: 0;
}

answered Apr 01 '13 at 20:57

Tosh

1,789
15
20

score 1 · Answer 10 · edited Nov 18 '14 at 00:59

1

i wanted to get this working for Button and this worked for me

button { 

    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;    
    background-color: transparent;
    noFocusLine: expression(this.onFocus=this.blur());
}

edited Nov 18 '14 at 00:59

AbcAeffchen

14,400
15
47
66

answered Nov 18 '14 at 00:36

Anoop Narayanan

11
1

score 0 · Answer 11 · answered May 31 '12 at 22:07

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
    }

score -5 · Answer 12 · edited Mar 01 '12 at 10:54

-5

a img {border: none; }

that's it, no need to complicate this.

edited Mar 01 '12 at 10:54

Timothy Jones

21,495
6
60
90

answered Mar 01 '12 at 01:15

Big Taters

1

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

12 Answers12

Linked

Related