CSS Custom radio button not working in IE 8
css, html, internet-explorer, javascript, jquery
Solution
The most obvious thing I see on first glance is `:checked`. This selector is not supported in IE8.
If your CSS won't work without the `:checked` selector, then it won't work in IE8.
The best solution I can offer is using a polyfill script like Selectivizr to add support for this selector to old IE versions.
Problem
I use the following code to generate a custom radio button. HTML ``` <div class="mealPlanContainer remove-padding"> <input id="mp_${mp.hotelMealPlanId}" name="mealPlan" type="radio" value="${mp.hotelMealPlanId}" class="css-checkbox"> <label for="mp_${mp.hotelMealPlanId}" class="css-label">${mp.mealPlanDescription}</label> </div> ``` CSS ``` .advance-search-row input[type=radio]{ margin-top: -4px; margin-right: 12px; display: none; } .advance-search-row span{ font-size: 15px; font-family: 'sagoe-ui-light'; color: #FFF; } .advance-search-row input[type=radio].css-checkbox { display:none; } .advance-search-row input[type=radio].css-checkbox + label.css-label { padding-left:24px; height:19px; display:inline-block; line-height:19px; background-repeat:no-repeat; background-position: 0 0; font-size:14px; vertical-align:middle; cursor:pointer; } .advance-search-row input[type=radio].css-checkbox:checked + label.css-label { background-position: 0 -19px; } .advance-search-row label.css-label { background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_353a617ca21d6630433b397442362d96.png); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ``` this works well in IE 9 upwards but not in IE 8. I think the issue is in the selector which uses to change the background position. Any idea on how to make it work in IE 8.