设置Bootstrap select的selectpicker版本的样式

Question

我正在尝试但失败，以样式化boostrap-select小部件。我尝试了以下代码，但是它不会更改selectpicker选择框中的背景和文本颜色：

 <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>

我的CSS看起来像这样：

 <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>

此CSS成功应用了左边框颜色，但没有应用背景颜色或文本颜色。

注意：此处输入链接描述在stackoverflow中显示的解决方案是针对标准Boostrap选择的。我正在使用https://silviomoreto.github.io/bootstrap-select中的selectpicker小部件。该解决方案似乎不适用于selectpicker，或者至少我无法使其正常工作。

Answer 1

您需要定位插件正在应用的Bootstrap选择类。如果您检查元素，则可以看到发生了什么。这是一个屏幕快照，供您参考所应用的内容。

工作示例：

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>