javascript - Bootstrap - 如何更改选择 "placeholder"选项文本的颜色

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)但是当用户将其更改为任何其他选项时，对于那些根据其他输入(#555)采用深灰色的人)

这可能吗？

Edit 更喜欢纯 CSS 解决方案，但由于这看起来不可能，JavaScript 解决方案也可以。

真的不确定为什么人们对此投反对票，因为给出的答案都不起作用!也许没那么容易。

Answer 1

您可以使用 [disabled] 和 :checked 选择器来做到这一点。

此选择器找到所有具有属性 disabled 的选项:

option[disabled] {
     color: #555;
}

并且此选择器找到所有当前选择的属性为 disabled 的 options:

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