CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Uprooted
Uprooted

Reputation: 971

Style bootstrap custom-select dropdown

I am a frontend noob learning bootstrap. I want to create multiple choice list with custom bg and font colors and I am using "custom-select" for it:

<div class="container-fluid">
    <select class="custom-select" style="color: #f50; background-color: #410;">
            <option>option 1</option>
            <option>option 2</option>
    </select>
</div>

It works in chromium, both button and option list have specified colors. However in firefox (59.0.2 on ubuntu) only button changes color, dropdown option list is white. How do I make it work in all browsers?

Upvotes: 0

Views: 3160

Answers (1)

Robert
Robert

Reputation: 6967

Bootstrap's custom-select component isn't a complete <select> replacement like certain JS solutions (select2, Chosen, etc). As such it is still subject to the limitations browsers place on what can and cannot be styled.

Your above example functions exactly as you imply you want in Mozilla Firefox (Desktop) version 59.0.2. The <select> container and the <option> values all apply the inline styles you've declared.

In macOS Safari and Google Chrome you'll see a somewhat different result due to how those browsers allow <select> to be styled. You cannot style the dropdown portion, so while these browsers will display your desired colors on the <select> container, your dropdown will appear in the default stylings.

There are, of course, some exceptions. Google Chrome allows you to adjust the font-weight of your dropdown list. Certain -webkit-*syntaxes can be used for browser-specific adjustments with varied results (and of course, exclusive to browsers using WebKit).

Upvotes: 1

Related Questions