css3實現單選、多選按鈕改變其原生樣式用圖片代替

最近才開始寫博客，所以把前幾個月做項目時遇到的問題整理一下寫出來，眾所周知，表單中的一寫元素原生樣式不是很好看，項目中用到的時候需要優化，今天我就寫一下單選按鈕很多選按鈕的樣式的優化，首先自己要做出按鈕選中之前的圖片和按鈕選中之后的圖片。然后就是代碼了。直接上代碼：(代碼比較多，這是我之前在做項目時樣式都搬過來了，樣式什么都是可以自己寫的。)

HTML代碼結構如下：



 1 <div class="radio" > 
    <label>
        <input type="radio" name="sex" value="" />
        <div class="option"></div><!--該div盛放的是優化后的按鈕圖片-->
        <span class="opt-text">男</span>
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="sex" value="" />
        <div class="option"></div><!--該div盛放的是優化后的按鈕圖片-->
        <span class="opt-text">女</span>
    </label>
</div>

 

css代碼如下：

 1 label {                 /*設置label的樣式*/
 2     width: 100%;
 3     padding: 10px 0px;
 4     display: block;
 5     line-height: 20px;
 6     position: relative;
 7     font-weight: normal;
 8 }
 9 .radio .option {      /*把優化后的按鈕圖片設置為該div的背景圖片，把該div定位到原生樣式的上方，遮蓋住原生樣式。*/
10     width: 25px;
11     height: 25px;
12     position: absolute;
13     top: 10px;
14     left: 0px;
15     background-size: cover;
16     background: url(img/radio.png) no-repeat;
17     background-size: cover;
18 }
19 .radio input[type="radio"] {  /*為了保險起見，把原生樣式隱藏掉*/
20     display: inline-block ;
21     margin-right: 15px ;
22     opacity: 0 ;
23 }
24 input[type="radio"]:checked+div {  /*當radiuo被選中時，把input下邊的div標簽的背景圖片替換掉*/
25     background: url(img/radio-checked.png) no-repeat;
26     background-size: cover;
27 }

 

最后貼上一張效果圖：