Custom styling for Bootstrap select

Question

I find the select Twitter Bootstrap's dropdown very ugly, how can I deactivate Bootstrap only for the select widget? Or is it possible to customize the way the select dropdown looks?

caseyjhol · Accepted Answer · 2019-03-13 04:48:39Z

15

Check it out: https://developer.snapappointments.com/bootstrap-select/

You can change the color of the dropdown button through the different classes. And if you want another color, just override it in css. E.g.:

.btn { background-color: #FFF; }

edited Mar 13, 2019 at 4:48

caseyjhol

3,9783 gold badges21 silver badges24 bronze badges

answered Nov 12, 2012 at 12:55

silviomoreto

5,9174 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kevin_b Over a year ago

How do I change the border color of selectPicker through Javascript? please look at this question stackoverflow.com/questions/38851856/…

Lodder · Accepted Answer · 2012-07-03 13:39:08Z

4

You can overwrite the css styling by simply adding your own for example:

select { background: #333333; }

This is a very basic example but its just an example of how you can customize it to your own liking.

answered Jul 3, 2012 at 13:39

Lodder

19.8k11 gold badges65 silver badges104 bronze badges

2 Comments

fkoessler Over a year ago

It doesn't work. I think the dropdowns are too big so I styled it in my own css file with: select {width:50px;} Nonetheless, my css rule is not taken into account, it is the css inline rule generated by bootstrap that is taken into account...

fkoessler Over a year ago

added a class to the select so that my css now has priority

Collectives™ on Stack Overflow

Custom styling for Bootstrap select

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related