<!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的样式*/
100%;
padding: 10px 0px;
display: block;
line-height: 20px;
position: relative;
font-weight: normal;
}
.radio .option {
/*把优化后的按钮图片设置为该div的背景图片，把该div定位到原生样式的上方，遮盖住原生样式。*/
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>