【特效】单选按钮和复选框的美化（只用css）

表单的默认样式都是比较朴素的，实际页面中往往需要美化他们。这里先说说单选按钮和复选框，有了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{ 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{ 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:''; 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{ 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:''; 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

源码下载：http://pan.baidu.com/s/1pKX0Qlt