Avoid grey background on IE 10 anchors / links

Question

How do you avoid the annoying grey background that IE 10 applies to anchors when you click them?

Answer 1

There is actually a really easy CSS fix. IE 10 changes the background-color of anchor tags when they are in the :active state. To stop it from happening or to change the colour you can use the CSS rule below.

a:active{
    background-color: transparent; /* Can be any colour, not just transparent */
}

Live demo: http://jsfiddle.net/tw16/NtjK7/

On a side note, it's worth mentioning that when styling links you need to ensure that you write the rules in the correct order to ensure that previous styles don't get overwritten:

a:link{}    /* 1st */
a:visited{} /* 2nd */
a:hover{}   /* 3rd */
a:active{}  /* 4th */

Answer 2

I found it was actually :focus that added the grey background.

this worked for me:

a:focus {
    background-color: transparent;
}