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

anchor, css, javascript, jquery

Solution

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

Problem

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.

Original source