美化radio

<form name="reg" onsubmit="return checkform(this);">
 请选择你的性别：
  <div id="male">
    <input type="radio" id="sex_male" checked="checked" name="sex" value="male" />
    <label name="sex_male" class="checked" for="sex_male">男</label>

    <input type="radio" id="sex_female" name="sex" value="female" />
    <label name="sex_female" for="sex_female">女</label>

	<input type="radio" id="sex_nomale" name="sex" value="nomale" />
    <label name="sex_nomale" for="sex_nomale">人妖</label>

  </div>
  <input type="submit" name="Submit" value="提交" id="Submit" />
</form>

body{
  font-size:12px;
  font-family:'宋体';
}

#sex_male,#sex_femal,#sex_nomale{
  display:none
}

label{
  /*display:-moz-inline-block;*/
  display:inline-block;
  cursor:pointer;
  margin:5px 0;
  padding-left:20px;
  line-height:15px;
  background:url(2.gif) no-repeat left top;
}
label.checked{
  background-position:left bottom;
}

window.onload = function() 
 {
  labels = document.getElementById('male').getElementsByTagName('label');
  radios = document.getElementById('male').getElementsByTagName('input');
  for(i=0,j=labels.length ; i<j ; i++)
  {
   labels[i].onclick=function() 
   {
    if(this.className == '') {
     for(k=0,l=labels.length ; k<l ; k++)
     {
      labels[k].className='';
	  radios[k].checked = false;
     }
     this.className='checked';
	 try{
	 	document.getElementById(this.name).checked = true;
	 } catch (e) {}
    }
   }
  }
 }
/*以下是点击提交按钮时，弹出的框，如果不需要，可直接删除 */
var male_obj = {'male':'男', 'female':'女','nomale':'人妖'};
 function checkform(obj) {
 	for (i = 0; i < obj.sex.length; i++) {
		if (obj.sex[i].checked) {
			alert(male_obj[obj.sex[i].value]);
			break;
		}
	}
	return false;
 }

所用到得图

[img]http://dl2.iteye.com/upload/attachment/0087/2719/458a308a-ee31-358b-950c-bbdc160d9dae.gif[/img]

最终图：

[img]http://dl2.iteye.com/upload/attachment/0087/2721/45c305a0-fb22-3c13-93f9-4fe07edacb2f.gif[/img]


来源：[url]http://www.geekso.com/radio/[/url]