JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://adam.co/lab/jquery/customselect/js/customSelect.jquery.min.js"></script>
<select class="styled" name="" title="Select title">
  <option>Select title</option>
  <option>Mr.</option>
  <option>Mrs.</option>
  <option>Miss.</option>
 </select>

CSS

body {
    font-family: arial;
}
select {
    border: 1px solid #d6d8db;
    background-color: #ecedee;
    text-transform: uppercase;
    color: #47515c;
    padding: 12px 30px 12px 10px;
    width: auto;
    cursor: pointer;
    margin-bottom: 10px;
}
select > option {
    text-transform: uppercase;
    padding: 5px 0px;
}
.customSelect {
    border: 1px solid #d6d8db;
    background-color: #ecedee;
    text-transform: uppercase;
    color: #47515c;
    padding: 12px 10px 12px 10px;
    margin-bottom: 10px;
}
.customSelect.changed {
    background-color: #f0dea4;
}   
.customSelectInner {
    background:url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat center right;
}

JavaScript

$(function(){
$('select.styled').customSelect();
});