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 -->
<link  href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link  href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//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;
}

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li id="special"><a href="#">Dropdown link2</a></li>
      <li><a href="#">Dropdown link3</a></li>
      <li><a href="#">Dropdown link4</a></li>
    </ul>
  </div>