Question

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

html代码：

function showDay(date: any) {
    let value = moment.utc(date, 'DD-MM-YYYY').format('DD');
}

css代码：

    <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>

我尝试了什么，但没有奏效：

label.titel{color: white;}

我搜索了一下，我发现，对于这种任务：check pseudoclass是有帮助的。我可以在选中时更改单选按钮或复选框的标签颜色，但在选中选项时不能更改选择标签的标签。

提前感谢您的帮助！

编辑为了使其更清晰，正如它在评论中提到的@Rembrand Reyes“当空白下拉时标题显示为白色，但当用户选择标题时，它会着色标签黑色？“

Answer 1

：checked伪选择器仅适用于输入radio和checkbox元素。当应用于选项元素而不是选择时，它可能在某些浏览器中有效，但据我所知，没有办法在所有浏览器中实现所需的内容。

尽管可以使用javascript。

Answer 2

如上文@Peter M的评论中所述，您无法使用＆＃34; +＆＃34;选择之前的兄弟姐妹。你可以做的是利用Javascript为选择选项的更改添加标签的CSS样式，如下所示：

＆＃13;

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

＆＃13;

.titel
{
color: white;
}

＆＃13;

<!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>

＆＃13;

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

2 个答案: