JSFiddle - React, Tailwind, and code Playground

by Mr Ghost

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.7/css/bootstrap-select.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<h1>
  Costumizando o Select com o Bootstrap
</h1>

<select id="touchpoint-filter" class="selectpicker filter">
  <option>Python</option>
  <option>Java</option>
  <option>C#</option>
  <option>GO</option>
</select>

CSS

body { background: #BCBEC3; padding: 30px; }

select {
 
  padding: 10px !important;
  margin: 0 0 20px 0 !important;
}

.bootstrap-select .btn-default {
  color: #7498AC;
  border-color: #7498AC;
  background-color: #464A52;
  border-radius: 3px;
}

.bootstrap-select.open .btn-default,
.bootstrap-select.open .btn-default:hover {
  color: #FFF;
  border-color: #828A99;
  background-color: #464A52;
  border-radius: 3px;

}

/* Editar o drop menu aqui */
.bootstrap-select .dropdown-menu {
  border-color: #7498AC;
  background-color: #464A52;
  border-radius: 3px;
}

.bootstrap-select .btn-default:focus {
    outline: none !important;
}

.bootstrap-select .dropdown-menu li a {
    color: #828A99;
    padding: 8px 10px;
}

.bootstrap-select .dropdown-menu li.selected a {
    background: #595E69;
    color: #FFF;
}

.bootstrap-select .dropdown-menu li a:hover {
    color: #FFF;
    background: #50555E;
}

.bootstrap-select .dropdown-menu li a:active {
    color: #FFF;
    background: #50555E;
}

.bootstrap-select .btn-default:active {
    color: #FFF;
    background: #50555E;
}

.bootstrap-select a:focus {
  outline: none !important;
}

JavaScript

$(document).ready(function () {
    $('#touchpoint-filter').selectpicker();
});