флажок и переключатель не отображаются в IE7?

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>​ 

Css

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 herehttp://jsfiddle.net/rohitazad/Vsvg2/79/

Answer 1

: checked является собственностью css3, которая не поддерживается IE8 & ниже браузеров. Но вы можете добиться этого с помощью http://selectivizr.com/ JS, которые поддерживают все псевдоселектор css3 для IE

Answer 2

Как указано, :checked - псевдослот css3.

Вы все еще можете использовать селектор атрибута, хотя, как так:

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