JSFiddle - React, Tailwind, and code Playground

HTML

<div class="language-dropdown">
    <label>
        <select class="language-select">
            <option class="language-option" selected>English</option>
            <option class="language-option">Hebrew</option>
            <option class="language-option">Russian</option>
        </select>
    </label>
</div>

CSS

body {
    background:black;
}
.language-dropdown {
    background: rgba(255, 255, 255, 0.4);
    display: inline-block;
}
.language-select {
    background: url("http://s10.postimg.org/otetjsoat/language_Arrow.png") no-repeat right;
    background-size: auto 42%;
    width: 88px;
    background-position-x: 73px;
    -webkit-appearance: none;
    /*Removes default chrome and safari style*/
    -moz-appearance: none;
    /*Removes default style Firefox*/
    color: #fff;
    border: none;
    text-indent: 0.01px;
    /* Removes default arrow from firefox*/
    text-overflow:"";
    /*Removes default arrow from firefox*/
    padding-left: 5px;
}
.language-option {
    background-color: rgba(212, 31, 31, 0.48);
    /*WONT WORK!!! , but "background-color:red;"  will*/
}