One idea for my website is to replace a select element with a button that triggers the dropdown. The plan is to place the select element inside a button DIV, position the select element on top of the button, and set its opacity to 0 so it appears hidden. When the button is clicked, the dropdown will open as usual...
<div class='color-button'>Pick a Color
<select name='color' id='colorpicker' class='hide-color-select'>
//bunch of color options here
</select>
</div>
div.color-button {
width: 200px;
height: 40px;
background: #eeeeee;
}
.hide-cat-select {
width: 200px;
height: 40px;
position: absolute;
left: 0px;
opacity: 0.01;
}
NOTE: Setting opacity to 0 prevents clicking to open the Select element, but 0.01 allows this functionality while still hiding the element.
Do you think this approach is too hacky? I'm open to suggestions for a more effective way to achieve this.
Thank you!