CSS3 IE9 click through pseudo-element?

Question

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 the 'click' action of the drop down arrow that they are positioned over. This works in fine in every single browser except IE9. Does anyone have any idea how to tweak this to work? I'm all ears!

http://jsfiddle.net/CXJTv/

P.S. I'm only interested in css ideas. I do not want JavaScript to be a requirement to get this to work correctly.

this is the best pure-css solution i've seen to date....works both on webkit and Gecko. Did you end up finding a solution for IE9? — Danield, Dec 19 '12 at 13:38

Paul Sweatte · Accepted Answer · 2016-11-17T05:56:36.127

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>

I'm just going to accept this because it technically works and I don't like having unresolved questions open. Its not my ideal answer because duplicating the select every time I do this is not desirable. I'm I thought that opacity is not supported in all browsers (such as older browsers that are still in the wild). — Rick Kukiela, Jan 09 '13 at 03:24

score 0 · Answer 2 · edited May 23 '17 at 11:53

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.

CSS3 IE9 click through pseudo-element?

2 Answers2

Linked