Radio Button Style not working in Internet Explorer 8

Question

I am having few radio buttons. I use the following css for changing the radio button style with an image. It works perfectly in firefox, chrome and even Internet Explorer 9 but not in Internet Explorer 8.

input[type='radio'] + label {
margin: 0;
clear: none;
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(icons.png) left center no-repeat;
background-position:0px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}

input[type='radio']:checked + label {
background-image: url(icons.png);
background-position:-54px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}

Solution 1

the :checked pseudo class is not available in IE8

http://www.quirksmode.org/css/contents.html

http://www.quirksmode.org/css/enabled.html

I just show normal radio buttons in IE8 and lower. This gives people with old technology the same experience and doesn't burden you with hours/days of work just to have everything look the same across browsers.

Solution 2

Only for IE 8 and above. you can use

input[type='radio'][checked] + label {
background-image: url(icons.png);
background-position:-54px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}

This will work in IE8 and above but not in IE7 and below..