How to remove dotted border around the link in IE7

Question

There is border around button and link when click.

How can I remove it?

Answer 1

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 2

Try this one

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

Answer 3

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

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

Answer 4

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 5

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 6

This would do the trick

a {
   outline:0;
}

Answer 7

This will also work

    a 
    {
        outline-style:none;
    }

Answer 8

a:link{ outline-style: none; }`

Answer 9

Try setting the outline property:

a {
   outline: 0;
}

Answer 10

Try

a {
     outline: none;
}

Always try to use css reset.This will help you to solve the problem like this.I use eric mayer css reset tool.

Answer 11

Apply this rule to the input

input { outline : none ; }

Answer 12

This is all around code to remove outerline and put in your your CSS under the desired class name (className in IE). Example for <a> 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;
}

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 there's default value, but 0 understand in all browsers there are using 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 13

You can do it with this code:

   a:focus{
      border: none;
    }