默认的样式如下图：
inputradio01.png
修改为下图样式：
inputradio02.png
代码如下（背景替换为需要的图即可）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>重置input类型为radio的默认样式</title>
<style type="text/css">
.reset-radio-wrap {
display: inline-block;
width: 100%;
border: 1px solid #ededed;
padding-left: 15px;
}
.reset-radio-wrap label {
display: inline-block;
padding: 5px 25px 5px 25px;
position: relative;
cursor: pointer;
}
.reset-radio-wrap label input[type=radio] {
width: 16px;
height: 16px;
background-image: url(../img/radio_off.png);
appearance: none;
-webkit-appearance: none;
outline: none;
position: absolute;
top: 50%;
left: 0px;
margin-top: -8px;
}
.reset-radio-wrap label input[type=radio]:checked {
background-image: url(../img/radio_on.png);
}
</style>
</head>
<body>
<div class="reset-radio-wrap">
<label>
<input type="radio" name="sex" value="male" />
<span>男</span>
</label>
<label>
<input type="radio" name="sex" value="female" />
<span>女</span>
</label>
</div>
</body>
</html>
网友评论