JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-select-wrapper">
    <div class="choice">
        от <span class="option-data">2011</span>
        <span class="select-arrow">&#9660;</span>
    </div>
    <ul class="custom-select">
        <li>2011</li>
        <li>2012</li>
        <li>2013</li>
        <li>2014</li>
        <li>2015</li>
        <li>2016</li>
    </ul>
</div>
<select>
    <option>2011</option>
    <option>2012</option>
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
    <option>2016</option>
</select>

CSS

* {
    box-sizing: border-box;
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    margin: 10px;
    width: 100px;
}

.custom-select {
    position: absolute;
    /*display: block;*/
    display: none;
    width: 100%;
    border: 1px solid #999;
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.custom-select li,
.custom-select-wrapper .choice {
    padding: 5px;
    text-align: left;
}

.custom-select-wrapper .choice {
    border: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.custom-select li:hover {
    background: #3399ff;
    color: #fff;
    cursor: default;
}

.choice {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.select-arrow {
    position: absolute;
    right: 0;
    padding: 0 5px;
    cursor: pointer;
}

.select-arrow::hover {}

JavaScript

var d = document,
    realSelect = d.querySelector('select'),
    sel = d.querySelector('.custom-select'),
    choiceBox = d.querySelector('.choice'),
    optChoice = choiceBox.querySelector('.option-data'),
    targets = [choiceBox, choiceBox.querySelector('.option-data'), choiceBox.querySelector('.select-arrow')],
    optLi = [].slice.call(sel.querySelectorAll('li'));

d.addEventListener('click', function(e) {
    sel.style.display = targets.indexOf(e.target) !== -1 ? (sel.style.display === 'block' ? 'none' : 'block') : 'none';
    if (optLi.indexOf(e.target) !== -1) {
        optChoice.textContent = e.target.textContent;
        realSelect.selectedIndex = optLi.indexOf(e.target);
    }
});