JSFiddle - React, Tailwind, and code Playground

HTML

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options' size="10" style='display:none;'>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
</select>

CSS

label {
    background:url('https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-16.png') right center no-repeat;
    padding:0 20px 0 10px;
    border:solid 1px #eee;
}
.hover {
    background:blue;
    color:white;
}

JavaScript

$('#choose').click(function (e) {
        e.stopPropagation();
        $(this).siblings('select').css('width', $(this).outerWidth(true)).toggle();
    });

    $('#options').change(function (e) {
        e.stopPropagation();
        var val = this.value || 'Select options';
        $(this).siblings('#choose').text(val);
        $(this).hide();
    });

    $('select').find('option').on({
        'mouseover': function () {
            $('.hover').removeClass('hover');
            $(this).addClass('hover');
        },
            'mouseleave': function () {
            $(this).removeClass('hover');
        }
    });