radio button with custom background image turns black in internet explorer - html

Question

I need to render radiobuttons on my site with specific background-images:
not checked
, checked
I solved this problem by adding the following styles for radiobutton elements:
{
width: 20px;
height: 20px;
-webkit-appearance: none;
background-image: url(/Images/notChackedRadioButton.png);
background-repeat: no-repeat;
}
Everything was fine, but when i open my site in Internet Explorer I see that all radiobuttons became black.
Seems like IE adds its own image above my background image, but I don't have any idea how to solve this. Please, any suggestions will be helpful.

Answer 1

Not knowing the rest of your code here is an example of a way you can do it. Works in IE 11 and IE Edge. Found on codepen for rest of the example - https://codepen.io/tutsplus/pen/bgqYJz
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat;
}
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p>
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>