JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<label>
    <select>
        <option selected="selected">Relevanz <label><i class="fa fa-angle-down"></i></label></option>
        <option>Datum <i class="fa fa-angle-down"></i></option>
    </select>
</label>

CSS

select {
    padding:4px;
    margin: 0;
    background: #fff;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    width: 150px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {
    position:relative
}
label:after {
    content:"\f078";   
    font-family: "FontAwesome";
    font-size: 11px;
    color:#aaa;
    right:8px; top:4px;
    padding:0 0 2px;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:4px; top:0px;
    width:23px; height:18px;
    background:#fff;
    position:absolute;
    pointer-events:none;
    display:block;
}