JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div>
<label>
    <select>
        <option selected=""> Select Box </option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>
</div>

CSS

div { position: relative; width: 300px; }
label { position: relative; }
label:after {
    border-bottom: 1px solid #DDDDDD;
    color: #AAAAAA;
    content: "<>";
    font: 11px "Consolas",monospace;
    padding: 0 0 2px;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 2px;
    transform: rotate(90deg);
}
label:before {
    background: none repeat scroll 0 0 #F8F8F8;
    content: "";
    display: block;
    height: 20px;
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: 0;
    width: 20px;
}

select { height: 30px; line-height: 30px; }
select option { height: 30px; line-height: 30px; }