html - my site's radio buttons don't work in IE -

is there way make work in ie? trying style survey , not work in ie6 hover on fine checked dosen't work

css:

.a label {     display:inline-block;     background-color:#f36;     padding:4px 11px;     font-family:arial;     font-size:16px;     width:775px;     text-align:center;     margin-left:auto;     margin-right:auto; }  .a label:hover{     background-color: #c36; }  .a input[type="radio"]:checked + label {     background-color: #c36; } 

html:

<div class="a">  <input type="radio" name="price" value="1" id="1pr" checked="checked" /><label for="1pr">£0-2</label><br />  <input type="radio" name="price" value="2" id="2pr" /><label for="2pr">£3-£5</label><br />  <input type="radio" name="price" value="3" id="3pr" /><label for="3pr">£6-£8</label><br />  <input type="radio" name="price" value="4" id="4pr" /><label for="4pr">£9-£11</label><br />  <input type="radio" name="price" value="5" id="5pr" /><label for="5pr">£12-£14</label> </div> 

the :checked pseudoclass not supported until ie9.

for earlier versions of ie, there's no way pure css. need use javascript add class when radio button changes. here example using jquery:

$(document).ready(function() {     $('input[type="radio"]:checked').addclass("checked");     $('input[type="radio"]').change(function() {         var $this = $(this);         $("input.checked").removeclass("checked");         if ($this.prop("checked")) {             $this.addclass("checked");         }     }); }); 

you can see code in action here: http://jsfiddle.net/4rnbz/1/