0

Bootstrap 3.3.7

I have a <select> element and wanted to use the placeholder attribute. I read this isn't possible and it should just be done as a disabled option like this:

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

The trouble is, Bootstrap gives this a dark grey colour (#555) because it's treating it like text in other (non-select) text inputs.

The placeholder colour of the font in Bootstrap is a lighter grey (#999). I want it to match.

But, I cannot find a way to target that option. I've tried the following:

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

And giving the first option a class, e.g. 

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

 .placeholder-dummy { color: #999; }

The only way I could in any way target it was just using the ID like this:

#foo { color: #999; }

But... that gives the same light grey placeholder colour even after the user changes the option.

I want the "placeholder" ("Select your thing") light grey (#999) but when the user changes it to any other option, for those to take the darker grey as per the other inputs (#555)

Is this possible?

Edit would prefer a pure CSS solution but as this is looking impossible a JavaScript solution would be ok.

Really unsure why people have down-voted this as none of the answers given work! Maybe it's not that easy.

Andy
  • 5,142
  • 11
  • 58
  • 131
  • I think you might need JS to change the 'placeholder' to the darker grey when the user makes a selection. If you are open to that please add JS or jQuery tags to your question – sol Jul 18 '17 at 10:03
  • @ovokuro I would prefer a pure CSS solution but will resort to jquery/js if needed. I'll add the tags. If you know how to do it with js please post. – Andy Jul 18 '17 at 10:08
  • If want to conditionally change the colour of the select menu depending on it's value, then you can use JS to check the value (which will be empty when the 'please select' message is shown) and change it's colour accordingly e.g. https://jsfiddle.net/bkm8xLj6/ – Rob Howells Jul 18 '17 at 10:21
  • @RobHowells ok, but the colour never changes (to blue or red) on that example fiddle? – Andy Jul 18 '17 at 10:34
  • When the page loads the select menu is red, then when a option is selected, it changes to blue. Is that not what you were looking for? – Rob Howells Jul 18 '17 at 10:42
  • @RobHowells looks like a browser comptability issue. It doesn't work at all in Chrome (59.0.3071.115) but works in Firefox 54.0 – Andy Jul 18 '17 at 11:03
  • I'm using that version of chrome and it's working fine for me. Sorry I can't help! – Rob Howells Jul 18 '17 at 11:06

2 Answers2

1

You can do this using [disabled] and :checked selectors.

This selector finds all options with attribute disabled:

option[disabled] {
     color: #555;
}

And this selector finds all options with attribute disabled that are currently selected:

option[disabled]:checked {
     color: #999;
}
fen1x
  • 5,616
  • 6
  • 28
  • 39
-1

Example:

put style in your css for select tag

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

Then change your placeholder option tag it should be like this:

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

instead of:

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