[转载]一款不错的单选按钮样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>按钮测试</title><style type="text/css"> body { font-size:12px; font-family:'宋体'; } #sex_male , #sex_female , #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(1.gif) no-repeat left top; } label.checked { background-position:left bottom; }</style><script type="text/javascript"> window.onload = function() { labels = document.getElementById('rd').getElementsByTagName('label'); radios = document.getElementById('rd').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':'A', 'female':'B','nomale':'C'}; 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; }</script></head><body><form name="reg" onsubmit="return checkform(this);"> <table border="0"> <tr> <td width="200" id="rd"><input type="radio" id="sex_male" checked="checked" name="sex" value="male" /><label name="sex_male" for="sex_male">A</label> <input type="radio" id="sex_female" name="sex" value="female" /><label name="sex_female" for="sex_female">B</label> <input type="radio" id="sex_nomale" name="sex" value="nomale" /><label name="sex_nomale" for="sex_nomale">C</label></td> </tr> <tr> <td> <input type="submit" name="Submit" value="测试选项" id="Submit" /></td> </tr> </table></form></body></html>?