Skip to content Skip to sidebar Skip to footer

CSS3 IE9 Click Through Pseudo-element?

I have the following fiddle set up with a sample on how to style a select box with CSS3. I'm having trouble in IE9. The label:before and label:after pseudo-elements are preventing

Solution 1:

Use a second select with zero opacity:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
          
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Solution 2:

If IE is problematic for your current implementation, you could always use Modernizer or conditional statements to make IE revert to the standard built in arrow of the drop down.

Here is a fiddle where I use conditional statements to only parse a class if it's a browser that's not IE.

Over here I answered a question which will probably help you to use a custom style for your select drop-down using pure css.


Post a Comment for "CSS3 IE9 Click Through Pseudo-element?"