CSS3 IE9 щелкните псевдоэлемент?

У меня есть следующая скрипта, созданная с образцом о том, как стилизовать поле выбора с помощью CSS3. У меня проблемы с IE9. Псевдоэлементы label:before и label:after предотвращают действие 'click' стрелки раскрывающегося списка, над которой они расположены. Это работает в любом браузере, кроме IE9. Кто-нибудь знает, как настроить эту работу? Я все уши!

http://jsfiddle.net/CXJTv/

P.S. Меня интересуют только идеи css. Я не хочу, чтобы JavaScript требовал, чтобы это правильно работало.

Ответ 1

Используйте второй выбор с нулевой прозрачностью:

    <!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>

Ответ 2

Если IE является проблематичным для вашей текущей реализации, вы всегда можете использовать Modernizer или conditional statements, чтобы заставить IE вернуться к стандартной встроенной стрелке в раскрывающемся списке.

Вот скрипка, где я использую условные операторы только для разбора класса, если это браузер, а не IE.

Здесь Я ответил на вопрос, который, вероятно, поможет вам использовать собственный стиль для выпадающего списка select, используя чистый css.