【问题标题】：Bootstrap - how to change colour of select "placeholder" option textBootstrap - 如何更改选择“占位符”选项文本的颜色
【发布时间】：2017-07-18 09:40:59
【问题描述】：

引导程序 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 解决方案就可以了。

真的不知道为什么人们对它投了反对票，因为给出的答案都不起作用！也许没那么容易。

【问题讨论】：

我认为当用户进行选择时，您可能需要 JS 将“占位符”更改为深灰色。如果您对此持开放态度，请在您的问题中添加 JS 或 jQuery 标签
@ovokuro 我更喜欢纯 CSS 解决方案，但如果需要，我会求助于 jquery/js。我会添加标签。如果您知道如何使用 js 进行操作，请发帖。
如果想根据其值有条件地改变选择菜单的颜色，那么您可以使用JS检查值（显示“请选择”消息时为空）并更改它是相应的颜色，例如jsfiddle.net/bkm8xLj6
@RobHowells 好的，但是该示例小提琴的颜色永远不会改变（蓝色或红色）？
当页面加载时选择菜单是红色的，然后当一个选项被选中时，它会变成蓝色。这不是你要找的吗？

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

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

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

option[disabled] {
     color: #555;
}

这个选择器会找到当前选中的所有具有disabled 属性的options：

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

【讨论】：

【解决方案2】：

例子：

在你的CSS中为选择标签添加样式

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

【讨论】：