JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<div class="outer">
    <div class="inner">
        <select size="5" multiple>
            <option value="0">One</option>
            <option value="1">Two</option>
            <option value="2">Three</option>
            <option value="3">Four</option>
            <option value="4">Five</option>
        </select>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
        </ul>
    </div>
</div>

CSS

.outer {
    width: 300px;
    padding: 5px;
    border: 1px solid #999;
}
.inner {
    position: relative;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    padding: 0 5px;
    line-height: 21px;
    font-family: sans-serif;
    font-size: 13px;
}
li.selected {
    background: #c00;
    color: #fff;
}
select {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
}

JavaScript

$('select').each(function() {
    var $sel = $(this);
    var targetHeight = $('ul').height();
    var fontSize = 9;
    var lastHeight = 0;
    $sel.css('font-size', fontSize);
    var currentHeight = $sel.height();
    while (currentHeight < targetHeight) {
        $sel.css('font-size', ++fontSize);
        var lastHeight = currentHeight;
        currentHeight = $sel.height();
    }
    if (targetHeight - lastHeight < currentHeight - targetHeight) {
        $sel.css('font-size', fontSize - 1);
    }
});
$('select').on('change', function() {
    var $items = $('ul li').removeClass('selected');
    var array = $(this).val();
    array.forEach(function(i) {
        $items.eq(i).addClass('selected');
    });
});