【特效】單選按鈕和復選框的美化（只用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{ 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

源碼下載：http://pan.baidu.com/s/1pKX0Qlt