how to remove dotted border around the link in IE7

Question

There is border around button and link when click.

Answer 1

Apply this rule to the input

input { outline : none ; }

Answer 2

This is all around code to remove outerline and put in your your CSS under the desired class name. (className in IE.) Example for tags

a{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;

}

Example for all tags in your html page!

*{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;

}

Example for a tag with class myClassName in your html page!

.myClassName{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;

}

Example for a tag with id myidName in your html page!

#myidName{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;

}

Hope this helped Works in major browsers and if not they are so old so the chance of how many people there still are using this old browsers!

Notes: outline:none 0; does also work in newer browsers but not in all. But outline:0; is universal and in those browsers there don´t understand 'none' and you get theres default value, but 0 understand in all browsers there are using this outline:. And you need this for IE7 _noFocusLine:expression(this.hideFocus=true);

or use Javascript for the rest!

window.document.getElementById("myidName").blur();
window.document.getElementById("myidName").hideFocus=true;
window.document.getElementById("myidName").style.outline=0;

or

Obj=window.document.getElementById("myidName");
Obj.blur();
Obj.hideFocus=true;
Obj.style.outline=0;

or with check if element exist!

if (window.document.getElementById("myidName")){
    Obj=window.document.getElementById("myidName");
    Obj.blur();
    Obj.hideFocus=true;
    Obj.style.outline=0;
}

Javascript can do the trick for IE6 and IE7 and other CSS can´t!

Answer 3

Try this one

a:hover, a:active, a:focus {
  outline: 0;
 }

Answer 4

It's ugly, but so are most IE fixes.

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

Answer 5

This would do the trick

a {
   outline:0;
}

Answer 6

To start with, I can see one of your tags is IE7-bug, while this is actually more like a feature. The purpose of having this dotted outline is for users to be able to navigate between various controls using their mousewheel or the tab key.

In any case, to define the style of an element when it's "focused" use the CSS :focus selector. The property that styles this outline is, trivially, outline; outline: 0 will prevent the focus outline from appearing.

Note: You might want to apply that rule only on your button, and not on all elements, because some users might be used to seeing something to indicate focus, which makes it easier to navigate using the methods mentioned above.

Hope that helped in any manner.