如何更改 select 选项中第一个元素的颜色？

Question

<select>
    <option value="">- Placeholder</option>
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
</select>

我想将未选中的下拉菜单（默认显示占位符值）的颜色更改为浅灰色。这样它看起来更像是一个 placeholder 字段，例如用于输入的字段。

特别是一旦选择了真实值，显示的文字应该不会恢复正常。

https://jsfiddle.net/bq32uxh7/

Answer 1

为确保您的占位符值不能被 selected，您可以将其设置为禁用。在大多数浏览器中，当未 selected 时它将显示为浅灰色，因此不 selectable。

<select>
    <option value="" selected disabled>- Placeholder</option>
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
</select>

如果您根本不想让占位符出现在选项列表中，您甚至可以使用 hidden 属性将其隐藏：

<option value="" selected disabled hidden>- Placeholder</option>

如果您想进一步设计样式，请参考@Rippo 的回答。

编辑：如果您想更改 select 输入在 selected 选项无效（即占位符）时的样子，您需要根据需要设置 select 输入，然后您可以在 select 的 css select 或

上使用 :invalid pseudo-class

function resetSelectElement()
{
  document.getElementById("select").selectedIndex = 0;
}

select:invalid {
  background-color: gray;
}

<select id="select" required>
    <option value="" selected disabled>- Placeholder</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<button type="button" onclick="resetSelectElement()">clear</button>

Answer 2

这会让你接近吗？

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById('form-select').addEventListener('change', function() {
    if (this.value === "") {
         if (!this.classList.contains('placeholder')) {
            this.classList.add('placeholder');
       }
         if (this.classList.contains('others')) {
            this.classList.remove('others');
       }
    } else {
         if (!this.classList.contains('others')) {
            this.classList.add('others');
       }
         if (this.classList.contains('placeholder')) {
            this.classList.remove('placeholder');
       }
    }
    });
});

#form-select {
  color: #8e8e8e;
}
#form-select.placeholder, option.placeholder {
  color: #8e8e8e;
}
#form-select.others, option.others {
    color:#000;
}

<select id="form-select" aria-label="Default select example">
  <option class="placeholder" value="" selected>- Placeholder</option>
  <option class="others" value="1">One</option>
  <option class="others" value="2">Two</option>
  <option class="others" value="3">Three</option>
</select>

我改变了几件事。

select 选项现在有一个 id
每个选项都有一个class
当您在深色模式下 select 编辑其他项目时，事情看起来有点奇怪，因为灰色迫使背景颜色进入浅色模式。这可以通过强制背景颜色来调整。在轻模式下效果很好
您应该能够重构 add/removing classes 并改为创建切换函数

如何更改 select 选项中第一个元素的颜色？

How to change color of first element in select option?

html

twitter-bootstrap