Avoid grey background on IE 10 anchors / links

css styles anchor internet-explorer-10
Diego picture Diego · Mar 11, 2013 · Viewed 7.4k times · Source

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

Answer

tw16 picture tw16 · Mar 21, 2013

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

Related questions

How to style icon color, size, and shadow of Font Awesome Icons

How could I style the color, size and shadow of icons from Font Awesome's Icons? For example, Font Awesome's site will show some icons in white and some in red but won't show the CSS for how to style them …

Read More
Override body style for content in an iframe

How can I control the background image and colour of a body element within an iframe? Note, the embedded body element has a class, and the iframe is of a page that is part of my site. The reason I …

Read More
CSS align images and text on same line

I have been searching and trying different methods for hours now. I just can't seem to get these two images and text all on one line. I want both the images and both text to all be on one line …

Read More