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.

select {    border: 0;    color: #EEE;    background: transparent;    font-size: 20px;    font-weight: bold;    padding: 2px 10px;    width: 378px;    *width: 350px;    *background: #58B14C;    -webkit-appearance: none;  }    #mainselection {    overflow: hidden;    width: 350px;    -moz-border-radius: 9px 9px 9px 9px;    -webkit-border-radius: 9px 9px 9px 9px;    border-radius: 9px 9px 9px 9px;    box-shadow: 1px 1px 11px #330033;    background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;  }

<div id="mainselection">    <select>      <option>Select an Option</option>      <option>Option 1</option>      <option>Option 2</option>    </select>  </div>

Answer 1

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:

1. Is to convert select into ul, li kind of select and do anything you want with this.

2. Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.