CODEWITHSUNDEEP
cssinternet-explorer
Sagnik
Sagnik

Reputation: 223

:focus not working as expected in IE

I have a question on accessibility on a postchat survey window which I've worked on.There's a close button on the top right(as an image of X) where I've included visual focus by putting focus pseudo class, now the problem i'm facing is that the close button has white border around it when it is focused and this is happening as expected in chrome, Mozilla but in IE a blue border is coming. Can someone help me how to remove this blue border and bring white in its place?

I'm sharing the code snippet where I've used focus

a.close-link:focus {
    outline: 1px dotted white;
}

Upvotes: 0

Views: 7930

Answers (3)

Sagnik
Sagnik

Reputation: 223

Well i've found out a workaround. For IE9 border comes by default so I've removed border now and the blue outline is no more there!

    a.close-link:focus {
        outline: 1px dotted white;
    }

    a.close-link img {
        border: none;
    }

Upvotes: 0

gmo
gmo

Reputation: 9000

:FOCUS pseudo-class does work in IE, Instead, I believe your problem is with outline property.

Try this:

IE 9

George Langley wrote in to say that IE 9 apparently doesn't allow you to remove the dotted outline around links unless you include this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

((source))

Upvotes: 0

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

Though active and focus are to different states but you can try both at same time for your purpose i think

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

following source http://www.w3schools.com/CSS/css_pseudo_classes.asp

a.close-link:focus, a.close-link:active {
        outline: 1px dotted white;
    }

Upvotes: 1

Related Questions