如何更改Bootstrap 3选定的选项背景颜色

Question

Can you please take a look at This Demo and let me know how I can change the background color of the selected option from Blue to some other colors?

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Thanks

Answer 1

Take a look at this:

http://jsfiddle.net/xL4Gu/3/

select{
    background: yellow !important;
    color:#FFF;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) { 
    background-color: white; 
    color:#000;
}

Use !important to override the Bootstrap CSS.

!important is a useful tool, but the drawback is that it's kind of a tool of last resort. So you don't want to over-use it as you'll end up causing headaches down the road for anyone that's maintaining the site.