JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<br><br><br>
    
<select>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>

CSS

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: linear-gradient(to bottom,  rgba(224,222,217,1) 0%,rgba(255,255,255,0) 100%);
    border: 1px solid #b2b2b2;
    border-radius: 2px;
    display: block;
    height: 1.5em;
    line-height: 1.5em;
    outline: none;
    position: relative;
    width: 100%;
}

select:after {
    border-left: 1px solid #B2B2B2;
    content: '\25BC';
    display: inline-block;
    line-height: 100%;
    margin: 3px 0 0;
    padding: 3px;
    position: absolute;
    right: 0;
    top: 0;    
}