Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Internet Explorer 9 / Pseudo Element

Css3 Ie9 Click Through Pseudo-element?

Post a Comment
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(2px51px19px2px); 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><selectid="real"><optionvalue="">Alpha</option><optionvalue="">Beta</option><optionvalue="">Charlie</option></select><selectid="fake"><optionvalue="">Alpha</option><optionvalue="">Beta</option><optionvalue="">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?"