使文本在表​​格的灰色行上可见？

Question

我们基本上在表中具有以下用于单选按钮的html代码：

<div class="graytitle">Wie oft nutzen Sie WhatsApp?</div>
<ul class="pageitem">
    <li class="radiobutton"><span class="name">Sehr oft</span>
    <input name="frage10" type="radio" value="sehr oft" /></li>
    <li class="radiobutton"><span class="name">Mittelmäßig</span>
    <input name="frage10" type="radio" value="mittel" /></li>
    <li class="radiobutton"><span class="name">Ehr selten</span>
    <input name="frage10" type="radio" value="ehr selten" /></li>
</ul>

我们希望在不使文本不可见的情况下使行变灰，我们在Google上进行了很多搜索，但找不到解决方案。 这是我们使用的：

for (var i = 0; i < document.UmfrageForm.frage10.length; i++) {
document.UmfrageForm.frage10[i].style.backgroundColor = "gray"; }

它将所有行（包括文本）显示为灰色。 我们希望在将行设置为灰色后文本仍然可见。 我们该怎么做？

灾难截图：

Answer 1

根据您的jsfiddle：您的样式表将span标签放置在输入标签的后面，这就是为什么在删除输入透明性后看不到span的原因。

您需要做的是将背景色应用于span标签，而不是输入标签。

[更新]如评论中的@alicelieutier所述，如果您只需要支持最新的浏览器，则还可以选择将半透明背景应用于输入：

for (var i = 0; i < document.UmfrageForm.frage10.length; i++) {
  document.UmfrageForm.frage10[i].style.backgroundColor = "rgba(0,0,0,0.7)";
}

Answer 2

不知道是否可能，但是您可以向每个li或span元素添加id属性。

假设您提供以下ID： frage10_opt1 ， frage10_opt2 ， frage10_opt3 。 然后，您可以使用以下代码更改文本颜色：

for (var i = 0; i < document.UmfrageForm.frage10.length; i++) {
    document.UmfrageForm.frage10[i].style.backgroundColor = "gray";
    document.getElementById("frage10_opt" + (i + 1)).style.color = "black";
}

Answer 3

我有点困惑。 您是要在特定事件触发时“灰显”行，还是希望它们始终被“灰显”？

我认为Michal代码的问题在于，您正在为表单的radio元素运行循环，并且您的文本位于该元素之前的span标记中。 您可以尝试获取单选元素的父元素（li元素）并设置样式颜色：

for (var i = 0; i < document.UmfrageForm.frage10.length; i++) {
    var radioElm = document.UmfrageForm.frage10[i].parentNode;
    radioElm.style.backgroundColor = "gray";
    radioElm.style.color = "black";
}

如果您始终希望单选按钮具有特定的颜色，建议您修改CSS类“单选按钮”和“名称”