How to change Bootstrap-select's placeholder color
<p>I want to change the placeholder/title color of <a href="https://silviomoreto.github.io/bootstrap-select/" rel="nofollow">Bootstrap-select</a> dropdown box. Right now it looks like this, which is black, I want it to be a dark grey. </p>

<p><a href="http://i.stack.imgur.com/NPvWg.png" rel="nofollow">Before</a></p>

<p>I tried adding this to my css</p>

<pre><code>span.filter-option.pull-left {
    color: darkgrey;
}
</code></pre>

<p><a href="http://i.stack.imgur.com/eFISO.png" rel="nofollow">After</a>, which works fine. But this also made the options a dark grey instead of black. <a href="http://i.stack.imgur.com/Rk3Xu.png" rel="nofollow">See here. </a>I only want to change the color of the placeholder to dark grey not all the options. How do I best accomplish this? Thanks.</p>

<p>HTML: </p>

<pre><code>&lt;select name="box" class="selectpicker form-control"&gt;
  &lt;option value=""&gt;Select&lt;/option&gt;
  &lt;option value="option1"&gt; Option 1 &lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p><strong>EDIT:</strong> </p>

<p>Pure CSS styling does not seem to work for me for some reason. I have tried using Bootstrap-select's native <strong>title</strong> property but it is not greyed out like it showed in the docs. Is there a Javascript/JQuery way for me to change the color of <strong>span.filter-option.pull-left</strong> depending whether it is "Select" or "Option 1"?</p>

<p>PS. this is what Chrome inspector tool shows me for <a href="http://i.stack.imgur.com/9X0AU.png" rel="nofollow">Select</a>
and for <a href="http://i.stack.imgur.com/jS6iC.png" rel="nofollow">Option 1</a>, there is no other option besides these two. </p>