HTML CSS：选择选项时更改标签的颜色答案

【问题标题】：HTML CSS: change color of label, when option is selectedHTML CSS：选择选项时更改标签的颜色
【发布时间】：2017-11-22 15:44:29
【问题描述】：

我想在 html 中设置一个 select-tag 的标签样式。当用户没有选择任何选项，标签的颜色应为白色。如果用户选择了一个选项，则标签应切换为白色。

html代码：

    <label class="titel" for="titel">Titel:</label>
      <select class="titel" name="titel">
        <option value=""></option>
        <option value="Proffessor">Prof.</option>
        <option value="Doctor">Dr.</option>
      </select>

css代码：

label.titel{color: white;}

我试过了，但没用：

select.titel:checked + label.titel{color: black;}

我搜索并发现，对于这类任务，:checked 伪类很有帮助。我可以在选中时更改单选按钮或复选框的标签颜色，但在选中选项时不能更改选择标签的标签。

提前感谢您的帮助！

编辑：为了更清楚，正如@Rembrand Reyes 在评论中提到的那样，“下拉时为空白时，标题显示为白色，但当用户选择标题时，它将为标签黑色？”

【问题讨论】：

所以如果我理解正确的话。下拉的空白时，标题显示为白色，但是当用户选择标题时，它会将标签着色为黑色？
@RembrandtReyes 完全正确！抱歉，如果不清楚
请编辑您的问题以使其更清晰
简单地说，没有支持的方法，您使用的+ 将选择下一个兄弟而不是前一个。为了实现你想要的，你应该改变你的 html

标签： html css

【解决方案1】：

正如@Peter M 评论中所述，您不能使用“+”选择上一个兄弟。您可以做的是利用 Javascript 为 select 选项的标签 onchange 添加 CSS 样式，如下所示：

window.onload = function() {
        var eSelect = document.getElementById('title');
        var optOther = document.getElementById('title-label');
        eSelect.onchange = function() {
            optOther.style.color = 'black';
        }
}

.titel
{
color: white;
}

<!DOCTYPE html>
<html>
<body>
    <label class="titel" id="title-label" for="titel">Titel:</label>
      <select class="titel" id="title" name="titel" selected="">>
        <option value=""></option>
        <option value="Proffessor">Prof.</option>
        <option value="Doctor">Dr.</option>
      </select>
</body>
</html>

【讨论】：

【解决方案2】：

:checked 伪选择器仅适用于输入单选和复选框元素。当应用于选项元素而不是选择时，它可能在某些浏览器中工作，但据我所知，没有办法在所有浏览器中实现您正在寻找的内容。

也许用 javascript 是可能的。

【讨论】：