JSFiddle - React, Tailwind, and code Playground

by Jonathan Smith

HTML

<select class="custom-select">
    <option>Bouncy Castle Barbequeue</option>
    <option>Search and Rescue Stilt Walkers</option>
    <option>Circus Tent Donkey Rides</option>
    <option>Face Painting Fire Breathers</option>
</select>
<hr />
<select>
    <option>Bouncy Castle Barbequeue</option>
    <option>Search and Rescue Stilt Walkers</option>
    <option>Circus Tent Donkey Rides</option>
    <option>Face Painting Fire Breathers</option>
</select>

CSS

.custom-select select {
    background-color: rgb(249, 249, 249);
    box-shadow: inset 0px 1px 4px rgba(0,0,0,0.2);
    padding:9px;
    margin: 0;
    border-radius:0.6em;
    -webkit-box-shadow: 
        0 0px 0 #ccc,
        0 0px #fff inset;
    color:black;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none; 
    cursor:pointer;
    border: 1px solid #ccc;
}

.custom-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border-radius:0.6em;
    border: 1px solid #ccc;
   }