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.

I'm trying to style a select box with a custom image. The way I have it set up is setting the opacity:0; for the select box, setting up a div behind it with a background image, and using javascript to set the current selected value inside the div. I have it working in Firefox, Chrome and Safari but no luck in IE.

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.

For the record, I have tried .click, .change, .live("click") .live("change") .live("click change"), .on("click"), .on("change") .on("click change") in my example #2 as far as testing it in the 4 browsers. My ultimate question is why doesn't example 2 work in ie. Secondary questions are what is with the opacity and its effect on the select box? I'm assuming something with the appearence:none I have in there, but I still don't understand why opacity matters to it. If you need me to post the acctual code I can. But you should be able to see the javascript and css through the test page I provided.

Answers


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)


Need Your Help

Is there any function for creating Hmac256 string in android?

android hmac hmacsha1

Is there any function for creating Hmac256 string in android ?

Regular expression with brackets

php regex expression

How to get 'text' from this string: