체크 박스와 라디오 버튼이 완벽하게 보이지 않습니다?

Question

순수 CSS에서 사용자 정의 체크 박스와 라디오 버튼을 만들고 있지만 IE7에서는 완벽하게 보이지 않습니다.

코드에서 어떤 시체 도움이 그것을

HTML

<ul> 
<li> 
<fieldset> 

<legend id="title1" class="desc"> 
Select a Choice 
</legend> 

<div> 
<span> 
<input id="Field1_0" name="Field1" type="radio" class="field radio" checked="checked"> 
<label class="choice" for="Field1_0"> 
First Choice</label> 
</span> 
<span> 
<input id="Field1_1" name="Field1" type="radio" class="field radio"> 
<label class="choice" for="Field1_1"> 
Second Choice</label> 
</span> 
<span> 
<input id="Field1_2" name="Field1" type="radio" class="field radio"> 
<label class="choice" for="Field1_2"> 
Third Choice</label> 
</span> 
</div> 
</fieldset> 
</li> 


<li> 
<fieldset> 

<legend id="title2" class="desc"> 
Check All That Apply 
</legend> 

<div> 
<span> 
<input id="Field2" name="Field2" type="checkbox" class="field checkbox" checked="checked"> 
<label class="choice" for="Field2">First Choice</label> 
</span> 
<span> 
<input id="Field3" name="Field3" type="checkbox" class="field checkbox"> 
<label class="choice" for="Field3">Second Choice</label> 
</span> 
<span> 
<input id="Field4" name="Field4" type="checkbox" class="field checkbox"> 
<label class="choice" for="Field4">Third Choice</label> 
</span> 
</div> 
</fieldset> 
</li> 
</ul>​ 

을 확인하시기 바랍니다

li:not(#foo) > fieldset > div > span > input[type='radio'], 
li:not(#foo) > fieldset > div > span > input[type='checkbox'] 
{ 
    opacity: 0; 
    float: left; 
    width: 18px; 
} 

li:not(#foo) > fieldset > div > span > input[type='radio'] + label, 
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label { 
    margin: 0; 
    clear: none; 
    padding: 5px 0 4px 24px; 
    /* Make look clickable because they are */ 
    cursor: pointer; 
    background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat; 
} 

li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label { 
    background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/radio.png); 
} 
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label { 
    background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png); 
}​ 

Live demo hereCSS는있다

Answer 1

: 확인은 아래 브라우저가 IE8 &에서 지원되지 않는 css3의 등록 정보입니다. 그러나 당신은 이것을 달성 할 수 있습니다 http://selectivizr.com/ JS IE를위한 모든 css3 의사 선택기를 지원합니다

Answer 2

마찬가지로 지적했듯이 :checked은 css3 pseudoclass입니다.

당신은 여전히 ​​같은 생각 속성 선택기를 사용할 수 있습니다

input[type='checkbox'][checked='checked']