JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<select id="sel" size = "1" onchange='this.size=0;' onblur="this.size=0;"  onmousedown="if(this.options.length>5){this.size=5;}">
<option>Select</option>
    <option>test 1</option>
    <option>test ayyappan 2</option>
    <option>test test 3</option>
    <option>test Raja 4</option>
    <option>test 5</option>
    <option>test 6</option>
    <option>test 7</option>
    <option>test 8</option>
    <option>test 9</option>    
</select>

CSS

option {
    filter: hue-rotate(177deg);
    border-top:#f0f0f0 solid 1px !important;
    position:absolute;
}

select {
  width: 100%;
  border: 0px solid #ccc;
  margin: 0;
  background: #fff none no-repeat;
  cursor: pointer;
}

@media screen and (min-width:0) {
  /* for relatively modern browsers including IE 8+ */
  select {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAZCAYAAADnstS2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH9JREFUeNpi/P//PwOxgImBBDDsFTP+dyJeMQsQMwNxLBCz4VF3B4j3gRT/BWJRIO7CofA7EJsgu7kbiHfgUFwAxNfQPRgHxC/QFK4E4lnYQuM1EIdCnQUC94E4HV/QHQHieiD+BcQRQPyRUNCBQgckupuicGYcTc+DTzFAgAEARhcb0a4IYZcAAAAASUVORK5CYII=");
    background-position: -50px -50px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* for Webkit */
  select {
    -webkit-appearance: none;
    background-position: 220px center;
    /*control width*/
    padding: 3px 171px 3px 20px;
  }
}

@-moz-document url-prefix() {
  /* for Firefox */
  select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
    background-position: right center;
    /*controls width of main area*/
  }
  
  /* hides the dotted outline on focus in FF (See SO#3773430) */
  select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* for IE10+ */
  select::-ms-expand {
    display: none;
  }
  select {
    background-position: right center;
    /*controls width?*/
    padding-right: 170px;
  }
}

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.setAttribute('size', '5');
    }
    else {
        el.className = '';
        el.setAttribute('size', '1');
    }
}