Change select box option background color

Question

I have a select box and I m trying to change the background color of the options when the select box has been clicked and shows all the options   See Fiddle  HTML    lt select gt       lt option val    gt Please choose lt  option gt       lt option val  1  gt Option 1 lt  option gt       lt option val  2  gt Option 2 lt  option gt       lt option val  3  gt Option 3 lt  option gt       lt option val  4  gt Option 4 lt  option gt   lt  select gt    CSS   select      margin 40px      background  rgba 0 0 0 0 3       color  fff      text-shadow 0 1px 0 rgba 0 0 0 0 4

User · Answer

Here it goes what I ve learned about the subject   The CSS 2 specification did not address the problem of how form elements should be presented to users period   Read here  smashing magazine  Eventually  you will never find any technical article from w3c or other addressed to this topic  Styling form elements in particular select boxes is not fully supported however  you can drive around    with some effort   Styling HTML Form Elements  Building Custom Widgets  Don t waste time with hacks e such read the links and learn how pros get the job done

User · Answer

If you really want to style the  within a   consider switching to a Javascript CSS based drop down such as http   getbootstrap com 2 3 2 components html dropdowns or https   silviomoreto github io bootstrap-select examples   This because browsers such as IE do not allow styling of options within  elements   Chrome OSX also has this problem - you cannot style options    However a warning is attached to that approach  These types of menus work very differently on mobile platforms because native elements aren t used  They can have annoying quirks on desktop as well  My advice is 1  don t write your own and 2  find a library that s been really well tested

User · Answer

Another option is to use Javascript   if  document getElementById  selectID   value     1            document getElementById  optionID   style color     000      Not as clean as the CSS attribute selector  but more powerful

User · Answer

My selects would not color the background until I added  important to the style       input  select  select option background-color  FFE  important

User · Answer

Simply change bg color  select       background   6ac17a      color  fff

User · Answer

You need to put background-color on the option tag and not the select tag     select option       margin  40px      background  rgba 0  0  0  0 3       color   fff      text-shadow  0 1px 0 rgba 0  0  0  0 4       If you want to style each one of the option tags   use the css attribute selector    x000D   x000D  select option   x000D    margin  40px  x000D    background  rgba 0  0  0  0 3   x000D    color   fff  x000D    text-shadow  0 1px 0 rgba 0  0  0  0 4   x000D    x000D   x000D  select option value  1     x000D    background  rgba 100  100  100  0 3   x000D    x000D   x000D  select option value  2     x000D    background  rgba 150  150  150  0 3   x000D    x000D   x000D  select option value  3     x000D    background  rgba 200  200  200  0 3   x000D    x000D   x000D  select option value  4     x000D    background  rgba 250  250  250  0 3   x000D    x000D   lt select gt  x000D     lt option value    gt Please choose lt  option gt  x000D     lt option value  1  gt Option 1 lt  option gt  x000D     lt option value  2  gt Option 2 lt  option gt  x000D     lt option value  3  gt Option 3 lt  option gt  x000D     lt option value  4  gt Option 4 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I don t know if you ve considered it or not but if your application is based on coloring various groupings of items you should probably use the  lt optgroup gt  tag coupled with a class for further referencing  For example    lt select gt       lt optgroup label  Numbers  class  green  gt           lt option value  1  gt One lt  option gt           lt option value  2  gt Two lt  option gt           lt option value  3  gt Three lt  option gt       lt  optgroup gt        lt optgroup label  Letters  class  blue  gt           lt option value  a  gt A lt  option gt           lt option value  b  gt B lt  option gt           lt option value  c  gt C lt  option gt       lt  optgroup gt   lt  select gt    and then in the head of your document write the css like this    lt style type  text css  gt       green option          background-color  0F0              blue option          background-color  00F         lt  style gt

User · Answer

htmlIngressCss   lt style gt     multiOptions   array      gt   All     resIn    this- gt commonDB- gt getIngressTrunk    while   row    resIn- gt fetch          if  row  IsActive    0            htmlIngressCss      ingressClass select  option value     row  TrunkInfoID        color red font-weight bold                multiOptions  row  TrunkInfoID       row  IngressTrunkName       htmlIngressCss    lt  style gt      add  htmlIngressCss in your html portion

User · Answer

Similar to some of the answers  but not really stated  is to add a class to the actual option tag and use css classes   this is currently working for me without issue on IE  see above ss     lt select id  reviewAction  gt   lt option class  greenColor  gt Accept and Advance Status lt  option gt   lt option class  redColor  gt Return for Modifications lt  option gt   lt  select gt    CSS    greenColor      background-color   33CC33     redColor      background-color   E60000

User · Answer

Yes  you can set this by the opposite way  select      desired background      option not  checked    background   fff     Check it working bellow   x000D   x000D  select     margin  50px    width  300px    background   ff0    color   000     option not  checked      background-color   fff    x000D   lt select gt     lt option val    gt Select Option lt  option gt     lt option val  1  gt Option 1 lt  option gt     lt option val  2  gt Option 2 lt  option gt     lt option val  3  gt Option 3 lt  option gt     lt option val  4  gt Option 4 lt  option gt   lt  select gt  x000D   x000D   x000D

[html] Change select box option background color

Examples related to html

Examples related to css

Examples related to html-select

Examples related to background-color