Bootstrap - 如何更改选择“占位符”选项文本的颜色

Question

Bootstrap 3.3.7

我有一个<select>元素，想要使用placeholder属性。我read this isn't possible，它应该像disabled这样的选项完成：

<select id="foo">
    <option value="" disabled selected>Select your thing</option>
    <option value="abc">abc</option>
    <option value="def">def</option>
</select>

问题是，Bootstrap给它一个深灰色（#555），因为它将其视为其他（非选择）文本输入中的文本。

Bootstrap中字体的占位符颜色为浅灰色（#999）。我想让它匹配。

但是，我无法找到定位该选项的方法。我尝试了以下内容：

#foo option:disabled { color: #999; }

给第一个选项一个类，例如

 <option value="" class="placeholder-dummy" disabled selected>Select your thing</option>

 .placeholder-dummy { color: #999; }

我能以任何方式定位它的唯一方法就是使用这样的ID：

#foo { color: #999; }

但是......即使在用户更改选项后，它也会提供相同的浅灰色占位符颜色。

我希望“占位符”（“选择您的东西”）呈浅灰色（#999），但当用户将其更改为任何其他选项时，对于那些根据其他输入采用深灰色的选项（{ {1}}）

这可能吗？

编辑更喜欢纯CSS解决方案，但因为这看起来不可能，JavaScript解决方案就可以了。

真的不确定为什么人们对此表示赞同，因为没有给出任何答案！也许这并不容易。

Answer 1

您可以使用[disabled]和:checked选择器执行此操作。

此选择器会查找属性为options的所有disabled：

option[disabled] {
     color: #555;
}

此选择器会查找当前所选的所有options属性disabled：

option[disabled]:checked {
     color: #999;
}

Answer 2

示例：

在你的css中为select标签添加样式

<style>
    select:invalid { color: gray; }
</style>

然后更改占位符选项标记，它应该是这样的：

<select id="foo">
    <option value="" disabled selected hidden>Select your thing</option>
    <option value="abc">abc</option>
    <option value="def">def</option>
</select>

而不是：

<select id="foo">
    <option value="" disabled selected>Select your thing</option>
    <option value="abc">abc</option>
    <option value="def">def</option>
</select>