JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<input type="text">
<form>
    <select class="js-select">
        <option name="wat" value="">Option 1</option>
        <option name="wat" value="">Option 2</option>
        <option name="wat" value="">Option 3</option>
        <option name="wat" value="">Option 4</option>
        <option name="wat" value="">Option 5</option>
        <option name="wat" value="">Option 6</option>
    </select>
</form>

SCSS

.prel {
    position: relative;
}
body {
    z-index: 1;
}

.hide-select {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
    z-index: -1!important;
    opacity: 0;
}

ul {
    width: 200px;
    height: auto;
    border-radius: 2px;
    border: 1px solid #ccc;
color: #666;
    cursor: pointer;
    background: white;
    list-style: none;
    text-align: left;
    float: left;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    position: absolute;
    top: 20px;
    
    li {
        padding: 5px;
        &:hover {
            background-color: #069;
                color: #fff;
            }
        &.highlight {
            background-color: #069;
                color: #fff;
            }
    }
}

.hidden-select {
    position: absolute;
    text-indent: -9999em;
    z-index: -1!important;
    width: 2000px;
}

.option-label {
    position: relative;
    cursor: pointer;
    display: block;
    float: left;
    background: white;
    font-weight: bold;
}

JavaScript

$(function () {
    var SelectDropdown = {
        init: function () {
            var $select = $('.js-select');

            this.setup($select);
        },

        /*
         * Initial setup of the dropdown
         */
        setup: function ($select) {
            // Hide actual (real) select box
            $select.addClass('hide-select');

            // Attach an ID to list items to reference them
            this.attachIdToOptions($select);

            // Create an unordered list out of the actual select dropdown
            this.createUnorderedList($select);

            // Attach event listeners to the newly created unordered list
            this.attachEvents($select);
        },

        /* Takes the select dropdown list and converts it into
         * a nice unordered list
         */
        createUnorderedList: function ($select) {
            var $ul = $('<ul />'),
                $div = $('<div />').addClass('prel'),
                $selectElements = $select.find('option'),
                $selectElementsArr = $.makeArray($selectElements),
                $numOptions = $selectElements.length,
                $lis = [];
            for (var i = 0; i < $numOptions; i++) {
                var $li = $('<li />'),
                    textContent = $selectElements.eq(i).text(),
                    dataId = $selectElements.eq(i).attr('data-id');

                $li.attr('data-id', dataId).append(textContent);

                $lis.push($li);
            }

            // Insert hidden ul into the DOM
            $div.addClass('js-select-wrapper').attr('data-menu-open', false).hide();
            
            $div.append($ul.append($lis)).insertAfter($select);

            this.selectFocus($select);

            // Add dropdown label
            var $label = $('<label />'),
                labelText = $select.find('option').first().text();
            $label.text(labelText).addClass('option-label');
            $div.before($label);
        },

      ...