Styling the selectpicker version of Bootstrap select

Question

I am trying, and failing, to style the boostrap-select widget. I have tried the following code but it does not change the background and text color in the selectpicker select box:

 <select id="what" class="wia-filter-value selectpicker show-tick">
     <option selected>All</option>
     <option>Events</option>
     <option>Man Made</option>
     <option>Nature</option>
 </select>

My CSS looks like this:

select {
    width: 200px;
    height: 30px;
    background-color: #141414 !important;
    border-style: solid;
    border-left-width: 3px;
    border-left-color: #00DDDD;
    border-top: none;
    border-bottom: none;
    border-right: none;
    color: white;
    font-size: 18px;
    font-weight: 200;
    padding-left: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.selectpicker{
    width: 200px;
    height: 30px;
    background-color: #141414 !important;
    border-style: solid;
    border-left-width: 3px;
    border-left-color: #00DDDD;
    border-top: none;
    border-bottom: none;
    border-right: none;
    color: white;
    font-size: 18px;
    font-weight: 200;
    padding-left: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand { /* for IE 11 */
    display: none;
}
.wia-filter-value {
    width: 200px;
    height: 30px;
    background-color: #141414 !important;
    border-style: solid;
    border-left-width: 3px;
    border-left-color: #00DDDD;
    border-top: none;
    border-bottom: none;
    border-right: none;
    color: white;
    font-size: 18px;
    font-weight: 200;
    padding-left: 6px;
}

This CSS successfully applies the left border color but does not apply the background color or the text color.

NOTE: The solution show in stackoverflow at enter link description here is for the standard Boostrap select. I am using the selectpicker widget from https://silviomoreto.github.io/bootstrap-select. That solution does not appear to work for selectpicker, or at least I cannot get it to work.

score 9 · Accepted Answer · answered Dec 04 '16 at 23:03

You need to target the Bootstrap-select classes the plugin is applying. If you inspect the element you can see what's going on. Here's a screenshot for reference as to what is being applied.

Working Example:

body {
  padding-top: 50px;
}
.bootstrap-select {
  max-width: 200px;
}
.bootstrap-select .btn {
  background-color: #141414;
  border-style: solid;
  border-left-width: 3px;
  border-left-color: #00DDDD;
  border-top: none;
  border-bottom: none;
  border-right: none;
  color: white;
  font-weight: 200;
  padding: 12px 12px;
  font-size: 16px;
  margin-bottom: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.bootstrap-select .dropdown-menu {
  margin: 15px 0 0;
}
select::-ms-expand {
  /* for IE 11 */
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />

<div class="container text-center">

  <select id="what" class="form-control selectpicker show-tick">
    <option selected>All</option>
    <option>Events</option>
    <option>Man Made</option>
    <option>Nature</option>
  </select>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

score -1 · Answer 2 · edited Sep 18 '18 at 00:45

-1

<div class="form-group">
    <label class="control-label col-md-4">Theme White</label>
    <div class="col-md-8">
        <select class="form-control selectpicker" data-size="10" data-live-search="true" data-style="btn-white">
            <option value="" selected>Select a Country</option>
            <option value="AF">Afghanistan</option>
            <option value="AL">Albania</option>
            <option value="DZ">Algeria</option>
            <option value="AS">American Samoa</option>
            <option value="AD">Andorra</option>
            <option value="AO">Angola</option>
            <option value="AI">Anguilla</option>
            <option value="AQ">Antarctica</option>
            <option value="AG">Antigua and Barbuda</option>
        </select>
    </div>
</div>

Add data-style="btn-white" for color white

edited Sep 18 '18 at 00:45

Carlos Ramirez III

7,054
24
32

answered Sep 17 '18 at 22:47

Jimmy Mendieta

1

btn-white does not seem to be a valid value for the `data-style` attribute, as per the documentation at https://developer.snapappointments.com/bootstrap-select/examples/. Trying anyway seems to turn the select grey (default color) instead of white. – remix23 Sep 17 '18 at 23:24
It's such a bizarre choice that they have made to style it as a button using button classes and not as a select. The control is named bootstrap-select. – tnk479 Jul 22 '19 at 15:50

Styling the selectpicker version of Bootstrap select

2 Answers2