Change color of a hidden select option

Question

I've got this:

  <select style="font-size: 20" id="subject" name="subject">
     <option hidden value="hello">I just want to say hello =]</option>
     <option value="quote">I'd like a quote</option>  
     <option value="general">General</option>   
  </select>

Works so far, but i'd like the hello option to be gray as selected (like placeholders in textareas)

if i do this:

  <select style="font-size: 20" id="subject" name="subject">
     <option hidden style="color:gray" value="hello">I just want to say hello =]</option>
     <option value="quote">I'd like a quote</option>  
     <option value="general">General</option>   
  </select>

It only changes the color of "hello" when dropped down, and not in the actual select element

possible duplicate of [How do I make a placeholder for a 'select' box?](http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box) — showdev, Feb 03 '15 at 22:58
You may want to read this article: http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/ — mxlfa, Feb 03 '15 at 23:01
Was indeed a dublicate, i found this on the other submission http://jsfiddle.net/Zmf6t/ I put in a hidden tag and it works perfectly, example: http://jsfiddle.net/udxwseew/ — fredericiaff, Feb 03 '15 at 23:55
Put in a disabled tag before the hidden tag in my jsfiddle example, and you wont be able to select the choose option with the arrow keys either — fredericiaff, Feb 03 '15 at 23:59

score -1 · Answer 1 · edited May 23 '17 at 12:07

-1

Is this what you mean? This will make the selected option be grey.

select {
    color: grey;
}
option:not(:checked) {
    color: black; /* or whatever your default style is */
}

http://jsfiddle.net/6reh1ptd/

Reference: https://stackoverflow.com/a/8619489/1585362

edited May 23 '17 at 12:07

Community

1
1

answered Feb 03 '15 at 23:04

Jack

2,741
2
24
32

Thank you, exactly as i wanted. – fredericiaff Feb 03 '15 at 23:44
Now i may just be annoying, but is there anyway to do this in-line? You know like – fredericiaff Feb 03 '15 at 23:46
Then you need some jQuery to apply `color:grey`. Would you like me to demonstrate? – unbindall Feb 03 '15 at 23:59
I figured it out, thanks for the example, heres how i would approach it, keeping the javascript as simple as possible: http://jsfiddle.net/ntL655bh/ – fredericiaff Feb 04 '15 at 00:06

Change color of a hidden select option

1 Answers1