how to remove dotted border around the link in IE7

Question

There is border around button and link when click.

could anyone help me solution to remove it.

Answer 1

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.

Answer 2

CSS outline is not supported in IE7. That "browser" requires the following CSS expression:

a {
    _noFocusLine: expression(this.hideFocus=true); 
}

It works also in newer versions.

Answer 3

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 4

Apply this rule to the input

input { outline : none ; }

Answer 5

You can preset it like that :

:focus{
    outline:0; /*removes the dotted border*/
}

But remember (for accessibility reasons) to set the style "later" in your CSS file to something more visible. For example :

a:focus, a:active{
    color:#ff5500; /*different color than regular*/
}
input[type=submit]:focus, input[type=submit]:active{
    background-color:#444; /*different color than regular*/
}

Answer 6

Try setting the outline property:

a {
   outline: 0;
}