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

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>

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

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

它会显示所有行，包括Text。我们希望在将行设置为灰色后仍然可以看到文本。我们怎么能这样做？

灾难截图：

Answer 1

基于你的jsfiddle：你的样式表将你的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

不知道是否可行，但您可以将id属性添加到每个li或span元素中。

假设您提供以下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代码的问题在于你正在为表单的无线电元素运行循环，而你的文本在元素之前的span标签中。您可以尝试获取radio元素的父元素（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类