Hide outline border on A tag focus
Thursday, October 15, 2009
When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:
Foobar 
This can be easy fixed (for all browsers except Internet Explorer!) by adding 1 line of CSS rule:
a:focus { outline: none; }
IE has non-standard HTML attribute hideFocus=”true” to solve this problem. Of course you don’t like to put this attribute in every <A> tag and submit buttons in your HTML. I have 2 working solutions for all browsers:
CSS expression solution
input, a {
outline:expression(hideFocus='true');
outline:none;
}
jQuery solution
$("a, input").each(function() {
$(this).attr("hideFocus", "true").css("outline", "none");
});


