CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user3649067
user3649067

Reputation: 237

How to Change Bootstrap 3 Selected Option Background Color

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

Upvotes: 3

Views: 32100

Answers (1)

imbondbaby
imbondbaby

Reputation: 6411

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.

Upvotes: 16

Related Questions