title: Styling the selectpicker version of Bootstrap select
body: <p>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:</p>
  
  <pre><code> &lt;select id="what" class="wia-filter-value selectpicker show-tick"&gt;
       &lt;option selected&gt;All&lt;/option&gt;
       &lt;option&gt;Events&lt;/option&gt;
       &lt;option&gt;Man Made&lt;/option&gt;
       &lt;option&gt;Nature&lt;/option&gt;
   &lt;/select&gt;
  </code></pre>
  
  <p>My CSS looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This CSS successfully applies the left border color but does not apply the background color or the text color.</p>
  
  <p><strong>NOTE:</strong> The solution show in stackoverflow at <a href="https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript">enter link description here</a> is for the standard Boostrap select. I am using the selectpicker widget from <a href="https://silviomoreto.github.io/bootstrap-select" rel="nofollow noreferrer">https://silviomoreto.github.io/bootstrap-select</a>. That solution does not appear to work for selectpicker, or at least I cannot get it to work.</p>