Styling Option Element Hover

I need to style an option element hover state. By default it's blue, but I need it to be green. Is it possible to style the element? I'm using bootstrap V3. I know how to change th

Solution 1:

As mentioned in comments, you cant reliably theme built in select dropdown elements. However there are scripts out there that make it possible to theme select lists.

//i found an example on google, its not mine so i wont copy it here. but link is below.

Code i found on google

Solution 2:

I'll add another answer, using bootstrap instead. Js Fiddle using Bootstrap

<!-- Latest compiled and minified CSS --><linkhref="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"><!-- Optional theme --><linkhref="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><scriptsrc="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>


.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus {
    background : #AAAFDA !important;
    font-weight : bold;
    border-radius : 22px;
    color: lightBlue;
}

<divclass="btn-group"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown">
      Dropdown
      <spanclass="caret"></span></button><ulclass="dropdown-menu"><li><ahref="#">Dropdown link</a></li><liid="special"><ahref="#">Dropdown link2</a></li><li><ahref="#">Dropdown link3</a></li><li><ahref="#">Dropdown link4</a></li></ul></div>