Home/ Questions/Q 8633809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:33:31+00:00

I have the following fiddle set up with a sample on how to style

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0