<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<style>
label {
/*設置label的樣式*/
width: 100%;
padding: 10px 0px;
display: block;
line-height: 20px;
position: relative;
font-weight: normal;
}
.radio .option {
/*把優化后的按鈕圖片設置為該div的背景圖片，把該div定位到原生樣式的上方，遮蓋住原生樣式。*/
width: 25px;
height: 25px;
position: absolute;
top: 10px;
left: 0px;
background-size: cover;
background: url(img/03.png) no-repeat;
background-size: cover;
}
.radio input[type="radio"] {
/*為了保險起見，把原生樣式隱藏掉*/
display: inline-block;
margin-right: 15px;
opacity: 0;
}
input[type="radio"]:checked+div {
/*當radiuo被選中時，把input下邊的div標簽的背景圖片替換掉*/
background: url(img/horn.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<!--HTML代碼結構如下：-->
<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>
</body>
</html>
