JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div class="scroll-container">
    <select size="10" multiple="multiple">
     <option value="1" selected>option 1</option>
     <option value="2">option 2</option>
     <option value="3">option 3</option>
     <option value="4">option 4</option>
     <option value="5">option 5 </option>
     <option value="6">option 6</option>
     <option value="6">option 7</option>
     <option value="6">option 8</option>
     <option value="6">option 9</option>
     <option value="6">option 10</option>
    </select>
</div>

CSS

.scroll-container {
        /* different behaviour can be defined for vertical/horizontal scroll*/
        overflow-x: auto;
        overflow-y: auto;
        /*adjust this according to your needs*/
        width: 73px;
        height: 70px;
    }

    .scroll-container select {
        border: none;
        overflow: hidden;
    }