라디오 버튼 내가 특정 배경 - 이미지 내 사이트에 라디오 버튼을 렌더링 할 필요가

Question

인터넷 익스플로러에서 검은 색으로 바뀝니다 :

{ 
    width: 20px; 
    height: 20px; 
    -webkit-appearance: none; 
    background-image: url(/Images/notChackedRadioButton.png); 
    background-repeat: no-repeat; 
} 

다 괜찮다고,하지만 난 Internet Explorer에서 내 사이트를 열 때 나는 all radiobuttons became black 것을 알 수있다. IE와 같이 보이지만 내 배경 이미지 위에 자체 이미지를 추가하지만이 문제를 해결할 방법이 없습니다. 제발, 어떤 제안이 도움이 될 것입니다.

Answer 1

나머지 코드를 모르는 경우 여기에서 수행 할 수있는 방법의 예입니다. IE 11 및 IE Edge에서 작동합니다. 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>

- 예제의 나머지 codepen에서 발견