js改变单选按钮背景图片，怎么更改文字颜色呢？效果如图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js改变单选按钮背景图片，怎么更改文字颜色呢？效果如图相关的知识，希望对你有一定的参考价值。
代码如下：
<title>JS实现单个图片选中美化框</title>
<style type="text/css">
#radio_wrap li inputpadding:0px; width:0px; height:0px; border-style:none;
#radio_wrap libackground: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 iwidth: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 inputpadding:0px; width:0px; height:0px; border-style:none;
#radio_wrap libackground:#008B00;position:relative; width: 138px; height: 58px; display:inline-block; *display:inline; *zoom:1;border-radius: 10px;
ifont-style: normal;text-align: center;color: #fff;font-family: '黑体'
#radio_wrap li.checked iwidth: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 标签的默认字体颜色为白色(.icolor:#fff;)，然后选中的为黑色，这样即可!
若有疑问，欢迎追问！
css是对了，怎么提交了得不到选中的值呢？php的
你是如何提交的？
要么用form表单提交，要么用$.post去提交（需要传递选中的参数）
图片是单选按钮的背景阿，文字要单独写的
追答不太懂你的意思，是发生事件的时候换吗？如果这样直接发生事件的时候换css就行了
参考技术B #radio_wrap li.checked iwidth: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 iwidth:138px; height:58px; position:absolute;
right:0; bottom:0;_right:-1px;
_bottom:-1px;background:url(../img/od_22-11.png) no-repeat;color:#fff;追问
黑色文字不会显示阿
追答你是要选中的文字变成什么颜色？不被选的又是什么颜色？
更改 Qt 中的单选按钮文本颜色
【中文标题】更改 Qt 中的单选按钮文本颜色【英文标题】：Change radio button text color in Qt 【发布时间】：2015-04-29 14:16:11 【问题描述】：我尝试过样式表、html 格式和调色板来将单选按钮的颜色更改为白色，但它们不起作用。
有没有办法改变它？ QRadioButton的文档中没有文字颜色的功能。
【问题讨论】：
【参考方案1】：如果您只想更改单选按钮的前景色，您可能需要为该按钮提供 alpha 背景色。例如：
QRadioButton color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0);
这将为您提供具有透明背景的白色。
【讨论】：
【参考方案2】：这听起来很奇怪。 QtCreator 和 QtDesigner 都将 QRadioButton 的 stylesheet 属性设置为
color: white; background-color: red;
给你一个红底白字的 QRadioButton （如果我理解这个问题）
【讨论】：
我试了很多次，文字颜色没有变化。 您能否发布一个代码示例（如果您尝试使用代码执行此操作），说明您在尝试什么？ 我重新安装了 qt 编译器，问题解决了：/太傻了，我不知道为什么会这样：(【参考方案3】：您将需要继承 QProxyStyle 并重新实现 drawControl() 方法以捕获带有 QStyle::CE_RadioButton 的调用。
如果您查看QRadioButton::paintEvent() 的来源：
QStylePainter p(this);
QStyleOptionButton opt;
initStyleOption(&opt);
p.drawControl(QStyle::CE_RadioButton, opt);
initStyleOption() 除了设置状态数据什么都不做；一切都由画家处理。这是QStylePainter::drawControl()，它只是调用当前的QStyle 来完成这项工作：
void QStylePainter::drawControl(QStyle::ControlElement ce, const QStyleOption &opt)
wstyle->drawControl(ce, &opt, this, widget);
Qt 文档包含有关如何子类化和加载代理样式的信息：http://doc.qt.io/qt-5/qproxystyle.html。查看 QCommonStyle::drawControl() 实现，了解 Qt 如何绘制控件。
【讨论】：
以上是关于js改变单选按钮背景图片，怎么更改文字颜色呢？效果如图的主要内容，如果未能解决你的问题，请参考以下文章