JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<label for="priority">Task priority</label><br>
<div class="selectorDiv">
<select class="form-control selectElement" style="width:480px; appearance: none;">
<option value="urgent" selected="selected">Urgent</option>
<option value="important">important</option>
<option value="later">Later</option>
</select>
</div>
</div>
</div>
CSS
.selectElement
{
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
height:50px;
/* Your style */
border:0 !important;
outline:none !important;
color:black;
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
/* padding:20px !important; */
height: 43px !important;
border-radius:4px !important;
}
.selectorDiv
{
position:relative;
display: inline-block;
}
.selectorDiv::before
{
position: absolute;
right: 20px;
top:0;
bottom:0;
margin-top:auto;
margin-bottom:auto;
margin-left: auto;
content: "";
z-index:5;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid green;
pointer-events:none;
}