JSFiddle - React, Tailwind, and code Playground

HTML

<div clas="select-wrap">
    <div class="fake-select"></div>
    <select class="select">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
</div>

CSS

.fake-select, .select {
    position: absolute;
    width: 100px;
    /*height: 30px;*/
}
.select {
    overflow: hidden;
}
.fake-select {
    z-index: 2;
    height: 20px;
}
.select-wrap {
    position: relative;
}

JavaScript

$(document).on("keydown", function (e) {
    console.log("nope");
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

$(".fake-select").on("click", function () {
    var numOfOpen = $("select.select option").size();
    $(".select").attr("size", numOfOpen).css("overflow", "hidden");
    $(this).hide();
});

$(".select").on("click", function () {
    $(".select").attr("size", 1);
    $(".fake-select").show();
});

//Just to view what is selected
$(".select option").on("mouseover", function () {
    $(this).prop("selected", true);
});

/*
if you want to type to search in select options you could use keydown event and set options with the following code for example:

$(".select option[value=2]").prop("selected",true)
*/