Issue with styling a select box
I've seen plenty of post on here dealing with this but I can't quick get this right.
Example 1: opacity = 0, no background image for div. Event fires but nothing is visible.
Example 2: opacity = 0, div has my background image. Works perfectly in Firefox, Chrome, and Safari, but not in IE.
Example 3: Opacity = 1, No background image for div. Event doesn't fire and normal select behavior doesn't seem to exist.
Example 4: Opacity = 1, div has my background image. Event doesn't fire and normal select behavior doesn't seem to exist.
Note: I removed opacity:1 from examples 3 and 4 and still get the same behavior. I am also using z-index of 50 on the select boxes and z-index of 0 on the div's to make sure they show up behind the select. The opposite doesn't seem to provide different behavior however.
You should nest the elements similar to
<div class="styled-dropdown-container"> <select>...</select> </div>
You can then add a click event listener on the .styled-dropdown-container. Events will propagete (bubble up) correctly from the dropdown and will also be simulated when the user focuses on your input manually (i.e. by tabbing through to it)