2

I only have basic knowledge of CSS and have tried to implement some methods I found online but have been unsuccessful. I have an html drop down element which shows the months:

<select id="myid">
<option value="" selected="selected">Month</option>
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MAR">MAR</option>
<option value="APR">APR</option>
<option value="MAY">MAY</option>
<option value="JUN">JUN</option>
<option value="JUL">JUL</option>
<option value="AUG">AUG</option>
<option value="SEP">SEP</option>
<option value="OCT">OCT</option>
<option value="NOV">NOV</option>
<option value="DEC">DEC</option>
</select>

The Month value is the default placeholder. Since it is just a placeholder I would like this to be a different color than the rest of the legitimate values. How can I style this specific value?

Thanks

user2924127
  • 6,034
  • 16
  • 78
  • 136
  • 1
    You can add `disabled` attribute: http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box – Gene R Mar 17 '16 at 18:28

2 Answers2

3

You can't do too much but you can change color and background color:

#myid option:first-of-type {
  background: red;
  color: white;
}

Here's a fiddle

StudioTime
  • 22,603
  • 38
  • 120
  • 207
  • Thanks for the reply. When the user loads the page the 'Month' value is prepopulated in the dropdown. It is the color black, but I am looking for it to be a different color while the value is actually in the dropdown box frame not when I click the dropdown box to see the values. – user2924127 Mar 17 '16 at 18:35
1

(After reading the comment on the first answer:)

Give the color to the surrounding element, and reset it for the dropdown like this:

#myid {
  color: red;
}
#myid option {
  color: black;
}

https://jsfiddle.net/3gud20do/

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks for the answer. Very close, but is it possible to make it red only for when it is the first value (Month)? – user2924127 Mar 17 '16 at 18:44