title: Issue with styling a select box
body: <p>I've seen plenty of post on here dealing with this but I can't quick get this right.</p>
  
  <p>I'm trying to style a select box with a custom image.  The way I have it set up is setting the <code>opacity:0;</code> 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.</p>
  
  <p>Example 1: opacity = 0, no background image for div.  Event fires but nothing is visible.</p>
  
  <p>Example 2: opacity = 0, div has my background image.  Works perfectly in Firefox, Chrome, and Safari, but not in IE.</p>
  
  <p>Example 3: Opacity = 1, No background image for div. Event doesn't fire and normal select behavior doesn't seem to exist.</p>
  
  <p>Example 4: Opacity = 1, div has my background image.  Event doesn't fire and normal select behavior doesn't seem to exist.</p>
  
  <p>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.</p>
  
  <p>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.</p>