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 the color of the option by adding a class, but how to change the hover state color? It's always blue - no matter what are you doing. Please tell me if it's even possible. If it's not I'm going to figure something out.

ps. Uniforms are fine too as long as they work with bootstrap V3

Thanks a lot!

回答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

回答2:

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

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" 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>

来源：https://stackoverflow.com/questions/19777166/styling-option-element-hover

标签

jquery

html

css

twitter-bootstrap-3