CSS3 IE9 щелкает через псевдоэлемент?

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

http://jsfiddle.net/CXJTv/

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


html css pseudo-element internet-explorer-9
person Rick Kukiela    schedule 08.08.2012    source источник
comment
это лучшее решение на чистом css, которое я когда-либо видел.... работает как на webkit, так и на Gecko. Вы нашли решение для IE9?   -  person Danield    schedule 19.12.2012

Ответы (2)


arrow_upward
2
arrow_downward

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

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

person Paul Sweatte    schedule 07.10.2012
comment
Я просто приму это, потому что технически это работает, и мне не нравится, когда нерешенные вопросы остаются открытыми. Это не мой идеальный ответ, потому что дублировать выбор каждый раз, когда я это делаю, нежелательно. Я думал, что непрозрачность поддерживается не во всех браузерах (например, в старых браузерах, которые все еще находятся в дикой природе). - person Rick Kukiela; 09.01.2013

arrow_upward
0
arrow_downward

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

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

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

person Danield    schedule 20.12.2012