引导 - 如何改变选择“占位符”选项的文本颜色

Question

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

麻烦的是，引导这给出了一个暗灰色（#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）

这可能吗？

编辑宁愿纯粹的CSS解决方案，但因为这看起来不可能，所以JavaScript解决方案就没有问题了。

真的不确定人们为什么低估了这一点，因为没有给出任何答案！也许这并不容易。

Answer 1

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

此选择查找所有options与属性disabled：

option[disabled] { 
    color: #555; 
} 

而且这个选择找到所有options与属性disabled当前选择：

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

Answer 2

实例：

放风格你选择标签的css

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

然后改变你的占位符选项标记应该是这样的：

​​

代替：

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