Hide & lt; a & gt; and the focus dashed box of the BUTTON

By default, A dotted box appears when you press <A/> and <BUTTON/> IE and FF.
Many times, this affects the unified style of our pages. Therefore, we need to remove this dotted box...

Maybe, many people are using this. blur () to make objects lose focus:

<A href = "#" onclick = "this. blur (); return false;"/> // Note: href has a value. Do not return false for onclick. Otherwise, the link may be invalid.


Obviously, this is a temporary solution. In fact, both IE and FF have a method to control the focus box style.

Under IE: add the hidefocus attribute to the element tag
FF: <a/> the label can use the standard style attribute outline of CSS2.0 to set the box style.
<Button/> there is no outline style, but you can use:-moz-focus-inner (FF private pseudo class, note that there are two colons) to set the box style.

For example, to hide a wiremap under IE and FF

Code
<Style type = "text/css">
A. hidefocus {outline: none;} // No profile
Button. hidefocus:-moz-focus-inner {border: none;} //:-moz-focus-inner no border
</Style>

<A herf = "#" class = "hidefocus" hidefocus> click the element attribute under my dotted line </a> // hidefocus IE
<Button class = "hidefocus" hidefocus> click my dotted line. </button>

If there are a lot of <a/> on the page, adding hidefocus [= true] One by one may be very troublesome,
Therefore, after the page is loaded, you can use js to add this attribute (the jquery page is easy to obtain the element object to be set as needed)

Code
Window. onload = function (){
// Something to do on window loaded
HideFocusWithButtons ();
}
Function hideFocusWithButtons (){
Var buttons = document. getElementsByTagName ('click ');
For (var I = 0, l = buttons. length; I <l; I ++ ){
Buttons [I]. setAttribute ('hidefo', true); // unhide the dotted line and set hidefocus to false.
}
}