How do change the color of the text of an option within a select

Question

I am trying to change the color of the first option to grey color  that only the text  select one option  but here it s not working here    x000D   x000D   grey color   x000D    color   ccc  x000D    font-size  14px  x000D    x000D   lt select id  select  gt  x000D      lt option selected  selected  gt  lt span class  grey color  gt select one option lt  span gt  lt  option gt  x000D      lt option gt one lt  option gt    x000D      lt option gt two lt  option gt    x000D      lt option gt three lt  option gt    x000D      lt option gt four lt  option gt    x000D      lt option  gt five lt  option gt    x000D   lt  select gt  x000D   x000D   x000D    My jsfiddle is here jsfiddle

User · Answer

I was recently having trouble with this same thing and I found a really simple solution.

All you have to do is set the first option to disabled and selected. Like this:

_x000D_

<select id="select">_x000D_
    <option disabled="disabled" selected="selected">select one option</option>_x000D_
    <option>one</option>_x000D_
    <option>two</option>_x000D_
    <option>three</option>_x000D_
    <option>four</option>_x000D_
    <option>five</option>_x000D_
</select>

_x000D_

This will display the first option (grayed out) when the page is loaded. It also prevents the user from being able to select it once they click on the list.

User · Answer

You just need to add disabled as option attribute   lt option disabled gt select one option lt  option gt

User · Answer

Here is my demo with jQuery   lt  doctype html gt   lt html gt   lt head gt   lt style gt      select          color  aaa            option not first-child            color   000         lt  style gt   lt script type  text javascript  src  https   code jquery com jquery-1 12 4 min js  gt  lt  script gt   lt script gt        document  ready function               select   change function                if    this  val          this  css  color    aaa                 else   this  css  color    000                           lt  script gt   lt meta charset  utf-8  gt   lt  head gt   lt body gt   lt select gt       lt option disable hidden value    gt CHOOSE lt  option gt       lt option gt  1 lt  option gt       lt option gt  2 lt  option gt       lt option gt  3 lt  option gt       lt option gt  4 lt  option gt   lt  select gt   lt  body gt   lt  html gt     https   jsfiddle net monster75 cnt73375 1

User · Answer

Suresh  you don t need use anything  in your codes  What you need is just something like this    x000D   x000D   others   x000D      color black x000D    x000D   lt select id  select  gt  x000D       lt option style  color gray  value  null  gt select one option lt  option gt  x000D       lt option value  1  class  others  gt one lt  option gt  x000D       lt option value  2  class  others  gt two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    But as you can see  because your first item in options is the first thing that your select control shows  you can not see its assigned color  While if you open the select list and see the opened items  you will see you could assign a gray color to the first option  So you need something else in jQuery     document  ready function            select   css  color   gray           select   change function           var current       select   val          if  current     null                   select   css  color   black            else                 select   css  color   gray                          This is my code in jsFiddle

User · Answer

You can t have HTML code inside the options  they can only contain text  but you can apply the class to the option instead    lt option selected  selected  class  grey color  gt select one option lt  option gt    Demo  http   jsfiddle net Guffa hUpAB 9   Note    The support for styling options varies between browsers  In modern brosers you generally can expect support for coloring but not for font size  A browser in a phone for example usually doesn t display the options in a dropdown  so the styling would not be relevant at all  You should not have html and head tags in the HTML code in jsfiddle  You should name your classes for what the represent  not how they look

User · Answer

Try just this without the span tag     lt option selected  selected  class  grey color  gt select one option lt  option gt    For bigger flexibility you can use any JS widget

User · Answer

x000D   x000D   lt select id  select  gt  x000D       lt optgroup label  select one option  gt  x000D           lt option gt one lt  option gt    x000D           lt option gt two lt  option gt    x000D           lt option gt three lt  option gt    x000D           lt option gt four lt  option gt    x000D           lt option gt five lt  option gt  x000D       lt  optgroup gt  x000D   lt  select gt  x000D   x000D   x000D    It all sounded like a lot of hard work to me  when optgroup gives you what you need - at least I think it does

[html] How do change the color of the text of an <option> within a <select>?

Examples related to html

Examples related to css