JSFiddle - React, Tailwind, and code Playground
HTML
<div class="editor-field styled-select" style="width:200px;">
<div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
CSS
.styled-select select
{
border: 0 !important; /*Removes border*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url('select_icon.png') no-repeat;
background-position: 179px 7px;
text-indent: 0.01px;
text-overflow: "";
color: #FCAF17;
width:200px;
}
.styled-select {
width: 200px;
height: 25px;
border: 1px solid #FCAF17;
}
div select {
z-index:1;
}
div:before {
display: block;
position: absolute;
content: '';
left: 188px;
top: 8px;
height: 18px;
width: 19px;
margin: 2px;
background: white;
z-index: 5;
}