How to change colour of blue highlight on select box dropdown

Question

How do I change the blue highlight on this dropdown please   link to select box demo  I d like to change the highlight color to gray if this is possible    x000D   x000D  select   x000D    border  0  x000D    color   EEE  x000D    background  transparent  x000D    font-size  20px  x000D    font-weight  bold  x000D    padding  2px 10px  x000D    width  378px  x000D     width  350px  x000D     background   58B14C  x000D    -webkit-appearance  none  x000D    x000D   x000D   mainselection   x000D    overflow  hidden  x000D    width  350px  x000D    -moz-border-radius  9px 9px 9px 9px  x000D    -webkit-border-radius  9px 9px 9px 9px  x000D    border-radius  9px 9px 9px 9px  x000D    box-shadow  1px 1px 11px  330033  x000D    background  url  http   www danielneumann com wp-content uploads 2011 01 arrow gif   no-repeat scroll 319px 5px  58B14C  x000D    x000D   lt div id  mainselection  gt  x000D     lt select gt  x000D       lt option gt Select an Option lt  option gt  x000D       lt option gt Option 1 lt  option gt  x000D       lt option gt Option 2 lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I believe you are looking for the outline CSS property  in conjunction with active and hover psuedo attributes       turn it off completely    select active  select hover     outline  none       make it red instead  with with same width and style     select active  select hover     outline-color  red     Full details of outline  outline-color  outline-style  and outline-width https   developer mozilla org en-US docs Web CSS outline

User · Answer

Yes  you could change the background of select but you will not be able to change the highlight color  when you hover  by using CSS      You have few options     Is to convert select into ul  li kind of select and do anything you want with this  Use libraries like Choosen  Select2 or jQuery Form Styler   These allow you to style in much more broad and cross-browser way

User · Answer

This works for firefox and chrome  falls back gracefully to the system color in IE  Just be sure to set the title property to the content of the option  It allows you to set the background and foreground colors   select option checked after       content  attr title       background   666      color   fff      position  absolute      width  100       left  0      border  none

User · Answer

Add this in your CSS code and change the red background-color with a color of your choice    dropdown-menu gt  active gt a  color black  background-color red    dropdown-menu gt  active gt a focus  color black  background-color red    dropdown-menu gt  active gt a hover  color black  background-color red

User · Answer

i just found this site that give a cool themes for the select box http   gregfranko com jquery selectBoxIt js    and you can try this themes if your problem with the overall look  blue - yellow - grey

User · Answer

When we click on an  input  element  it gets  focused  on  Removing the blue highlighter for this  focus  action is as simple as below  To give it gray color  you could define a gray border   select focus      border-color  gray      outline none

User · Answer

To both style the hover color and avoid the OS default color in Firefox  you need to add a box-shadow to both the select option and select option hover declarations  setting the color of the box-shadow on  select option  to the menu background color    select option     background   f00     color   fff     box-shadow  inset 20px 20px  f00     select option hover     color   000     box-shadow  inset 20px 20px  00f

User · Answer

Just found this whilst looking for a solution  I ve only tested it FF 32 0 3  box-shadow  0 0 10px 100px  fff inset

User · Answer

try this   I know it s an old post but it might help somebody  select option hover      select option focus      select option active           background  linear-gradient  000000   000000           background-color   000000  important     for IE            color   ffed00  important             select option checked           background  linear-gradient  d6d6d6   d6d6d6           background-color   d6d6d6  important     for IE            color   000000  important

[css] How to change colour of blue highlight on select box dropdown

Examples related to css