js改变单选按钮背景图片,怎么更改文字颜色呢?效果如图

发布网友发布时间：2022-04-06 11:40

共3个回答

热心网友时间：2022-04-06 13:09

默认不选中的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去提交（需要传递选中的参数）

热心网友时间：2022-04-06 14:27

文字是图片的一部分吗？追问图片是单选按钮的背景阿，文字要单独写的

追答不太懂你的意思，是发生事件的时候换吗？如果这样直接发生事件的时候换css就行了

热心网友时间：2022-04-06 16:02

#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;}追问黑色文字不会显示阿

追答你是要选中的文字变成什么颜色？不被选的又是什么颜色？