라디오 버튼 스타일 지정

Question

체크 박스의 스타일을 지정하고 싶습니다. 나는 HTML 마크 업과 CSS를 사용하여 그렇게 할 수있다.

그러나 문제는 내가 변경할 수없는 약간 다른 HTML 마크 업이 있다는 것입니다. 변경할 수없는 이유는 플러그인에 의해 생성된다는 것입니다. 따라서 변경하고 싶지 않은 코어 파일을 편집해야합니다.

그럼 내가 가지고있는 HTML에 어떻게 같은 스타일을 추가 할 수 있습니까?

작업 HTML :

<input type="radio" id="radio"> 
<label for="radio"></label> 

필수 HTML : 당신이 볼 수 있듯이

<li> 
    <input id="option-11" type="radio" value="11"> 
    <label for="option-11">Option one</label> 
</li> 

마크 업이 유사하지만,하지만, 라벨 위가를 표시하는 데 사용됩니다에 그 본문.

CSS :

input[type="radio"], input[type="checkbox"] { 
    display: none; 
} 

input[type="radio"] + label{ 
    background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png'); 
    padding:0; 
    display: inline-block; 
    width:20px; 
    height:20px; 
} 

input[type="radio"]:checked + label { 
    background:url('http://refundfx.com.au/uploads/image/checkbox_full.png'); 
} 

데모 : 어디에 문제가 그것은 당신의 코드와 함께 작동 http://jsfiddle.net/JPSLm/

Answer 1

, 나도 몰라.

http://jsfiddle.net/sGqsL/

HTML

<li> 
    <input type="radio" id="radio" name="radiogroup"/> 
    <label for="radio"></label> 
</li> 

및 CSS 문제가 무엇인지 정확하게

input[type="radio"], input[type="checkbox"] { 
    display: none; 
} 

input[type="radio"] + label{ 
    background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png'); 
    padding:0; 
    display: inline-block; 
    width:20px; 
    height:20px; 
} 

input[type="radio"]:checked + label { 
    background:url('http://refundfx.com.au/uploads/image/checkbox_full.png'); 
} 

li { 
    list-style-type: none; 
}