use label tags to beautify radio and checkbox,. When writing checked, label changes the background image. The effect is fine in mainstream browsers, but it doesn"t work in ie8. Radio and checkbox are really checked status when monitoring, but the style doesn"t come out, and you can"t find the answer even after bothering you for more than a long time.
html:
<div class="radio">
<div>
<input type="radio" name="library" id="radio1" class="hide" checked="true" />
<label for="radio1"><span></span></label>
</div>
<div>
<input type="radio" name="library" id="radio2" class="hide"/>
<label for="radio2"><span></span></label>
</div>
</div> css:
.radio label {
display: inline-block;
height: 30px;
line-height: 30px;
background: url(../images/radio.png) no-repeat 0 center;
padding-left: 28px;
cursor: pointer;}
.radio label:hover {
background-image: url(../images/radio-h.png);
color: -sharp18b1ea;}
.radio input [type=radio]: checked + label {
background-image: url(../images/radio-on.png);
color: -sharp18b1ea;}