Change Text Color of Selected Option in a Select Box

Question

I have a select box  The options have been styled with different colors via a CSS file that has been referenced  I want to be able to select an option and change the text color of the closed select box to the color of the chosen option    lt select id  mySelect  class  yellowText  gt       lt option class  greenText  value  apple   gt Apple lt  option gt       lt option class  redText  value  banana   gt Banana lt  option gt       lt option class  blueText  value  grape   gt Grape lt  option gt   lt  select gt    So if I select Banana  the text should change from yellow to red   I have tried   onchange  this style color   this options this selectedIndex  style color     But this only works if I define my styles within the option tags inside html document   I have also tried JavaScript   function setSelectColor thisElement       var thisElem   document getElementById thisElement       var thisOption   thisElem options thisElem selectedIndex       var newColor   getStyle thisOption  color        alert  New Color     newColor       But this always returns the color  white  The getStyle function works everywhere else I use it so I do not believe that s the problem    I got getStyle from this very website   function getStyle oElm  strCssRule       var strValue           if document defaultView  amp  amp  document defaultView getComputedStyle           strValue   document defaultView getComputedStyle oElm      getPropertyValue strCssRule             else if oElm currentStyle           strCssRule   strCssRule replace   -  w  g  function  strMatch  p1               return p1 toUpperCase                        strValue   oElm currentStyle strCssRule             return strValue      How can I solve this with JavaScript

User · Answer

CSS select    color red      HTML  lt select id  sel  onclick  document getElementById  sel   style color  green    gt    lt option gt Select Your Option lt  option gt    lt option value    gt INDIA lt  option gt    lt option value    gt USA lt  option gt   lt  select gt    The above code will change the colour of text on click of the select box   and if you want every option different colour  give separate class or id to all options

User · Answer

JQuery Code       mySelect   change function              mySelect   css  background      select option selected   css  background-color           This will replace the select s background-color with selected option s background-color   Here is an example fiddle

User · Answer

ONE COLOR CASE - CSS only  Just to register my experience  where I wanted to set only the color of the selected option to a specific one   I first tried to set by css only the color of the selected option with no success    Then  after trying some combinations  this has worked for me with SCSS   select         color  white     color of the selected option        option           color  black     color of all the other options              Take a look at a working example with only CSS    x000D   x000D  select   x000D    color  yellow     color of the selected option x000D     x000D   x000D  select option   x000D    color  black     color of all the other options x000D    x000D   lt select id  mySelect  gt  x000D       lt option value  apple   gt Apple lt  option gt  x000D       lt option value  banana   gt Banana lt  option gt  x000D       lt option value  grape   gt Grape lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    For different colors  depending on the selected option  you ll have to deal with js

User · Answer

lt html gt     lt style gt   selectBox   color White     optionBox    color black      lt  style gt   lt body gt   lt select class    selectBox  gt     lt option class    optionBox  gt One lt  option gt     lt option class    optionBox  gt Two lt  option gt     lt option class    optionBox  gt Three lt  option gt   lt  select gt

User · Answer

You could do it like this   jsFiddle  JS  var select   document getElementById  mySelect    select onchange   function          select className   this options this selectedIndex  className      CSS   redText       background-color  F00     greenText       background-color  0F0     blueText       background-color  00F      You could use option   background-color   FFF    if you want the list to be white   HTML   lt select id  mySelect  class  greenText  gt       lt option class  greenText  value  apple   gt Apple lt  option gt       lt option class  redText    value  banana   gt Banana lt  option gt       lt option class  blueText  value  grape   gt Grape lt  option gt   lt  select gt    Since this is a select it doesn t really make sense to use  yellowText as none selected if that s what you were getting at as something must be selected

User · Answer

Try this    x000D   x000D   greenText  background-color green    x000D   x000D   blueText  background-color blue    x000D   x000D   redText  background-color red    x000D   lt select x000D      onchange  this className this options this selectedIndex  className  x000D      class  greenText  gt  x000D        lt option class  greenText  value  apple   gt Apple lt  option gt  x000D       lt option class  redText    value  banana   gt Banana lt  option gt  x000D       lt option class  blueText  value  grape   gt Grape lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

[javascript] Change Text Color of Selected Option in a Select Box

Examples related to javascript

Examples related to html

Examples related to css

Examples related to drop-down-menu

Examples related to colors