Avoid grey background on IE 10 anchors / links

anchor, css, internet-explorer-10, styles

Solution

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 */

Problem

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

Original source