js改变单选按钮背景图片，怎么更改文字颜色呢？效果如图
代码如下：<title>JS实现单个图片选中美化框</title><styletype="text/css">#radio_wrapliinput{padding:0px...
代码如下：
<title>JS实现单个图片选中美化框</title>
<style type="text/css">
#radio_wrap li input{padding:0px; width:0px; height:0px; border-style:none;}
#radio_wrap li{background:url(../img/od_20-10.png) no-repeat;position:relative; width: 138px; height: 58px; display:inline-block; *display:inline; *zoom:1;}
#radio_wrap li.checked i{width:138px; height:58px; position:absolute; right:0; bottom:0;_right:-1px; _bottom:-1px;background:url(../img/od_22-11.png) no-repeat;}
</style>
</head>
<body>
<div id="radio_wrap">
<li class="c checked">
<input type="radio" id="radio_a_01" name="radio_a" class="rd"/>
<label for="radio_a_01"></label>
<i></i>
</li>
<li class="c">
<input type="radio" id="radio_a_02" name="radio_a" class="rd"/>
<label for="radio_a_02"></label>
<i></i>
</li>
</div>
<script type="text/javascript">
(function() {
var radioWrap = document.getElementById("radio_wrap"),
li = radioWrap.getElementsByTagName("li");
for(var i = 0; i < li.length; i++){
li[i].onclick = function() {
for(var i = 0; i < li.length; i++){
li[i].className = "";
}
this.className = "checked";
}
}
})();
</script>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html> 展开
<title>JS实现单个图片选中美化框</title>
<style type="text/css">
#radio_wrap li input{padding:0px; width:0px; height:0px; border-style:none;}
#radio_wrap li{background:url(../img/od_20-10.png) no-repeat;position:relative; width: 138px; height: 58px; display:inline-block; *display:inline; *zoom:1;}
#radio_wrap li.checked i{width:138px; height:58px; position:absolute; right:0; bottom:0;_right:-1px; _bottom:-1px;background:url(../img/od_22-11.png) no-repeat;}
</style>
</head>
<body>
<div id="radio_wrap">
<li class="c checked">
<input type="radio" id="radio_a_01" name="radio_a" class="rd"/>
<label for="radio_a_01"></label>
<i></i>
</li>
<li class="c">
<input type="radio" id="radio_a_02" name="radio_a" class="rd"/>
<label for="radio_a_02"></label>
<i></i>
</li>
</div>
<script type="text/javascript">
(function() {
var radioWrap = document.getElementById("radio_wrap"),
li = radioWrap.getElementsByTagName("li");
for(var i = 0; i < li.length; i++){
li[i].onclick = function() {
for(var i = 0; i < li.length; i++){
li[i].className = "";
}
this.className = "checked";
}
}
})();
</script>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html> 展开
展开全部
默认不选中的radio，显示的是白色的字，选中的为黑色的字，这主要定义你的css就行（因为没你那个背景图，我就用颜色取代，你复制粘贴去试试，注意看一下css的变化）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现单个图片选中美化框</title>
<style type="text/css">
#radio_wrap li input{padding:0px; width:0px; height:0px; border-style:none;}
#radio_wrap li{background:#008B00;position:relative; width: 138px; height: 58px; display:inline-block; *display:inline; *zoom:1;border-radius: 10px;}
i{font-style: normal;text-align: center;color: #fff;font-family: '黑体'}
#radio_wrap li.checked i{width:138px; height:58px; position:absolute; right:0; bottom:0;_right:-1px; _bottom:-1px;background:#FF7F00;border-radius: 10px;text-align: center;font-style: normal;color: #000;}
</style>
</head>
<body>
<div id="radio_wrap">
<li class="c checked">
<input type="radio" id="radio_a_01" name="radio_a" class="rd"/>
<label for="radio_a_01"></label>
<i>1111111</i>
</li>
<li class="c">
<input type="radio" id="radio_a_02" name="radio_a" class="rd"/>
<label for="radio_a_02"></label>
<i>22222222</i>
</li>
</div>
<script type="text/javascript">
(function() {
var radioWrap = document.getElementById("radio_wrap"),
li = radioWrap.getElementsByTagName("li");
for(var i = 0; i < li.length; i++){
li[i].onclick = function() {
for(var i = 0; i < li.length; i++){
li[i].className = "";
}
this.className = "checked";
}
}
})();
</script>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html>
定义 i 标签的默认字体颜色为白色(.i{color:#fff;})，然后选中的为黑色，这样即可!
若有疑问，欢迎追问！
追问
css是对了，怎么提交了得不到选中的值呢？PHP的
追答
你是如何提交的？
要么用form表单提交，要么用$.post去提交（需要传递选中的参数）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
文字是图片的一部分吗？
追问
图片是单选按钮的背景阿，文字要单独写的
追答
不太懂你的意思，是发生事件的时候换吗？如果这样直接发生事件的时候换css就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#radio_wrap li.checked i{width:138px; height:58px; position:absolute;
right:0; bottom:0;_right:-1px;
_bottom:-1px;background:url(../img/od_22-11.png) no-repeat;}这一段里面加一个color:#fff;也就是#radio_wrap li.checked i{width:138px; height:58px; position:absolute;
right:0; bottom:0;_right:-1px;
_bottom:-1px;background:url(../img/od_22-11.png) no-repeat;color:#fff;}
right:0; bottom:0;_right:-1px;
_bottom:-1px;background:url(../img/od_22-11.png) no-repeat;}这一段里面加一个color:#fff;也就是#radio_wrap li.checked i{width:138px; height:58px; position:absolute;
right:0; bottom:0;_right:-1px;
_bottom:-1px;background:url(../img/od_22-11.png) no-repeat;color:#fff;}
追问
黑色文字不会显示阿
追答
你是要选中的文字变成什么颜色？不被选的又是什么颜色？
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
