Disable grey border on anchor (<a>) elements on focus...

Question

I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property "outline:none;" works for Firefox, but how can I do it in IE. Preferably using CSS expressions or jquery. I'm not worried about accessibility BTW.

Based on your suggestions I found these to be the best solutions...

The jquery(for IE browsers):

$('a').focus(function(){
     $(this).blur();
});

Another jquery option(for IE browsers only):

$('a').focus(function(){
     $(this).attr("hideFocus", "hidefocus");
});

The CSS(For all other browsers that force an outline):

a{
     outline: none;
}

Note: Some browsers such as Google Chrome don't force an outline on focus.

Answer 1

does this not work:

a { border: 0; }

Answer 2

It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:

<a href="" onfocus="this.hideFocus=true;">link</a>

Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i

Answer 3

For IE, you can use Javascript like this:

<a href="..." onfocus="this.blur();">Click Here</a>

Read more: http://www.htmlgoodies.com/beyond/javascript/article.php/3471171

For Firefox and Safari, outline:none works.

Read more: http://css-tricks.com/removing-the-dotted-outline/

Answer 4

Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:

<a href="..." hidefocus="hidefocus">...</a>

http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx

Answer 5

Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!