JSFiddle - React, Tailwind, and code Playground

HTML

<p>Which is the most annoing browser of them all:</p>
<select id="sel" size = "1">
    <option></option>
    <option>IE 9</option>
    <option>IE 10</option>
    <option>Edge</option>
    <option>Firefox</option>
    <option>Chrome</option>
    <option>Opera</option>
    <option>Safari</option>
    <option>UC Browser</option>
</select>

CSS

select {
    position: absolute;
    z-index: 0;
}
.selectOpen {
    z-index:9;
}

JavaScript

document.getElementById('sel').addEventListener('click', onClickHandler);
document.getElementById('sel').addEventListener('mousedown', onMouseDownHandler);

function onMouseDownHandler(e){
	var el = e.currentTarget;
	
    if(el.hasAttribute('size') && el.getAttribute('size') == '1'){
    	e.preventDefault();    
    }
}
function onClickHandler(e) {
 	var el = e.currentTarget; 

    if (el.getAttribute('size') == '1') {
        el.className += " selectOpen";
        el.setAttribute('size', '6');
    }
    else {
        el.className = '';
        el.setAttribute('size', '1');
    }
}