How to change the text color of first select option

Question

I have a select element which has several items  I want to change the color of its first item  but it seems the color only shows when you click on the select dropdown  What I want is to change the color  like gray  when the page is loaded so users can see the first option color is different   See the example here    http   jsbin com acucan 4   css   select    width  150px    height  30px    padding  5px    color  green    select option   color  black    select option first-child    color  green      html    lt select gt       lt option gt Item1 lt  option gt       lt option gt Item2 lt  option gt       lt option gt Item3 lt  option gt   lt  select gt

User · Answer

If the first item is to be used as a placeholder (empty value) and your select is required then you can use the :invalid pseudo-class to target it.

_x000D_

select {_x000D_
  -webkit-appearance: menulist-button;_x000D_
  color: black;_x000D_
}_x000D_
_x000D_
select:invalid {_x000D_
  color: green;_x000D_
}

_x000D_

<select required>_x000D_
  <option value="">Item1</option>_x000D_
  <option value="Item2">Item2</option>_x000D_
  <option value="Item3">Item3</option>_x000D_
</select>

_x000D_

User · Answer

You can do this by using CSS  JSFiddle  HTML    lt select gt       lt option gt Text 1 lt  option gt       lt option gt Text 2 lt  option gt       lt option gt Text 3 lt  option gt   lt  select gt    CSS   select option first-child   color red      Or if you absolutely need to use JavaScript  not adviced for this   JSFiddle  JavaScript     function            select option first-child   addClass  highlight          CSS    highlight   color red

User · Answer

Here is a way so that when you select an option  it turns black  When you change it back to the placeholder  it turns back into the placeholder color  in this case red    http   jsfiddle net wFP44 166   It requires the options to have values    x000D   x000D     select   on  change   function     x000D    if    this  val      x000D  return   this  css  color    black    x000D      else   x000D  return   this  css  color    red    x000D      x000D      x000D  select  x000D    color  red  x000D    x000D  select option   color  black    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select gt  x000D   lt option value    gt Pick one    lt  option gt  x000D   lt option value  test1  gt Test 1 lt  option gt  x000D   lt option value  test2  gt Test 2 lt  option gt  x000D   lt option value  test3  gt Test 3 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I really wanted this  placeholders should look the same for text boxes as select boxes   and straight CSS wasn t working in Chrome  Here is what I did   First make sure your select tag has a  has-prompt class   Then initialize this class somewhere in document ready     Adds a class to select boxes that have prompt currently selected    Allows for placeholder-like styling    Looks for has-prompt class on select tag  Mess Views SelectPromptStyler   Backbone View extend   el   body     initialize  - gt          select has-prompt   trigger  change      events       change select has-prompt    changed     changed   e  - gt      select      e currentTarget      if select find  option   first   is   selected         select addClass  prompt-selected       else       select removeClass  prompt-selected     Then in CSS   select prompt-selected     color   placeholder-color

User · Answer

For Option 1 used as the placeholder  select invalid   color grey     All other options  select valid   color black

User · Answer

What about this   x000D   x000D  select    width  150px    height  30px    padding  5px    color  green    select option   color  black    select option first-child    color  green    x000D   lt select gt     lt option gt one lt  option gt     lt option gt two lt  option gt   lt  select gt  x000D   x000D   x000D   http   jsbin com acucan 9

[css] How to change the text color of first select option

Examples related to css

Examples related to select

Examples related to input