JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" value="AAA" id="AAA" />
<div class="drop1">
<select id="dropdown">
<option value="categ1">Category1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="drop2">
<select id="dropdown2">
<option value="categ1">Category1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
CSS
.drop1, .drop2 {
float: left;
width: 180px;
height: 34px;
overflow: hidden;
background: url(images/dropdwn.png) no-repeat right #ccc;
border-radius: 4px;
border:1px solid #000;
box-shadow: 0 1px 3px #f00;
font-size:14px;
margin:0 10px;
position:relative;
}
.arrow {
cursor:pointer;
position: absolute;
display: block;
width: 20%;
height: 100%;
background: #0f0;
top: 0;
right: 0;
}
.drop1 select, .drop2 select {
background: transparent;
width: 100%;
padding: 5px;
font-size: 14px;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #f00;
cursor: pointer;
}
.drop1 option, .drop2 option {
text-align: center;
margin: 0 auto;
color: #000;
cursor: pointer;
}
JavaScript
(function () {
showDropdown = function (element) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(event);
};
window.runThis1 = function () {
var dropdown = document.getElementById('dropdown');
showDropdown(dropdown);
};
window.runThis2 = function () {
var dropdown = document.getElementById('dropdown2');
showDropdown(dropdown);
};
})();