表单的默认样式都是比较朴素的，实际页面中往往需要美化他们。这里先说说单选按钮和复选框，有了css3，这个问题就变的好解决了。利用input与label相关联，对label进行美化并使其覆盖掉原本的input，并利用旋转属性transform实现复选框中的那个“√”，当然也可以使用背景图片。对于IE8以下嘛，当然不支持了，只能用默认样式了，所以用条件注释隐藏掉label吧。
html：
<div class="con">
<h1>单选框复选框的美化</h1>
<h2>复选框:</h2>
<span class="check_box">
<input type="checkbox" id="check_1">
<label for="check_1"></label>
<em>选项1</em>
</span>
<br><br>
<span class="check_box">
<input type="checkbox" id="check_2">
<label for="check_2"></label>
<em>选项2</em>
</span>
<br><br>
<h2>单选框:</h2>
<span class="radio_box">
<input type="radio" id="radio_1" name="radio" checked>
<label for="radio_1"></label>
<em>选项1</em>
</span>
<br><br>
<span class="radio_box">
<input type="radio" id="radio_2" name="radio">
<label for="radio_2"></label>
<em>选项2</em>
</span>
</div>
css：
body{ font:menu; font-size:16px;}
.con{ width:1000px; margin:0 auto;}
.con h1{ text-align:center;}
h1,h2{ font-weight:normal; color:#0CC;}
ul{ margin:0; padding:0; list-style:none;}
em{ font-style:normal;}
/*复选*/
.check_box{ display:inline-block; position:relative;}
.check_box label{ width:16px; height:16px; position:absolute; top:0; left:0; border:2px solid #cacaca; border-radius:50%; background:#fff; cursor:pointer;}
.check_box label:hover{ border:2px solid #f78642;}
.check_box label:after{ content:''; width:8px; height:4px; position:absolute; top:4px; left:3px; border:2px solid #cacaca; border-top:none; border-right:none; opacity:0.4; transform:rotate(-45deg); /*-webkit-transform:rotate(-45deg);*/}
.check_box label:hover:after{ border:2px solid #f78642; border-top:none; border-right:none;}
.check_box input:checked + label{ border:2px solid #f78642;}
.check_box input:checked + label:after{ opacity:1; border:2px solid #f78642; border-top:none; border-right:none;}
.check_box em{ margin:0 0 0 5px;}
/*单选*/
.radio_box{ display:inline-block; position:relative;}
.radio_box label{ width:15px; height:15px; position:absolute; top:0; left:0; border:2px solid #ef4949; border-radius:50%; background:#fff; cursor:pointer;}
.radio_box input:checked + label:after{ content:''; width:9px; height:9px; position:absolute; top:3px; left:3px; background:#ef4949; border-radius:50%;}
.check_box em{ margin:0 0 0 5px;}
</style>
<!--[if lte IE 8]>
<style>
.check_box label,.radio_box label{display:none;}
</style>
<![endif]-->
效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2847.htm