JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<div class="slct">
    <select>
        <option>Foobar</option>
        <option>Bar</option>
        <option>Foo</option>
        <option>Baz</option>
    </select>
    <div class="slct-drpdwn"></div>
</div>

CSS

.slct {
    position:relative;
    display:inline-block;
    border:solid black 1px;
    z-index:0
}
div select {
    z-index:1;
}
.slct .slct-drpdwn {
    display:block;
    position:absolute;
    right:0px;
    top:0px;
    height:1em;
    width:1em;
    margin:2px;
    background:red;
    z-index:5;
    /*pointer-events: none;*/
}

JavaScript

$('.slct-drpdwn').click(function() {
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('mousedown');
    $('select')[0].dispatchEvent(e);
});