JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<ul>
    <li><span>--</span></li>
    <li><span>--</span></li>
</ul>
<select id="sel">
    <option>--</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>Seven</option>
    <option>Eight</option>
    <option>Nine</option>
    <option>Ten</option>
</select>

CSS

#sel {
    display: none;
}
li #sel {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
ul {
    margin 13px 0;
    padding: 0;
    list-style: none;
}
li {
    margin 2px 0;
    padding: 2px 2px 2px 20px;
    position: relative;
    line-height: 16px;
    height: 16px;
}
li:hover {
    background: #eee;
}
li i {
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    padding: 0;
    position: absolute;
    top: 2px;
    left: 2px;
    background: #fff;
}
li i:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #999;
    position: absolute;
    top: 5px;
    left: 2px;
}

JavaScript

var $sel = $('#sel').remove();
var $icon = $('<i/>').append($sel);
var $ul = $('ul');
$ul.on('change', 'select', function(e) {
    var val = $sel.val();
    console.log(val);
    $sel.closest('li').data('value', val).find('span').text(val);
});
$ul.on('mouseenter', 'li', function(e) {
    var $li = $(this);
    $sel.val($li.data('value'));
    $li.prepend($icon);
});
$ul.on('mouseleave', 'li', function(e) {
    $icon.remove();
});