JSFiddle - React, Tailwind, and code Playground

by Sushil Gaonkar

HTML

<div class="wrapper">
<span class="drop-down-arrow"></span>
    <select name="" id="subject" class="applicationDropDown">
            <option value="Option 1">O[tion 1</option>
            <option value="O[tion 2">O[tion 2</option>
            <option value="Other">Other</option>
    </select>
</div>

CSS

.wrapper{
    position:relative;
    float:left;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
}

.applicationDropDown{
    background:#e6e6e6;
    color:#989898;
    @include rem-px(font-size,(16px));
    @include rem-px(height,(50px));
    max-height:200px;
    overflow-y:scroll;
    outline : none;
    transition: none;
}

span.drop-down-arrow{       
    background: #a4cf53;
    display: block;
    position:absolute;
    width:20px;
    height:20px;
    pointer-events:none;
    right:0;
    top:0;
    z-index:999;
}