Удаление IE10 Select Element Arrow

Итак, с Mozilla и WebKit у меня есть полупристойное решение, которое заменяет стрелку в поле select, используя appearance: none; и имеющую родительский элемент.

В IE по большей части я отключил эту функцию. Для IE10 я не могу фактически отключить его, так как мои условные комментарии на самом деле не работают.

Вот моя разметка:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]>    <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->

Класс ie10plus на самом деле не подходит для разметки.

Я также чувствую, что может быть законный способ заменить стрелку в IE. Я не против фактической фиксации проблемы. appearance: none; однако не работает. Итак, что я могу сделать здесь?

Ответы

Ответ 1

Избегайте обнуления браузеров и условных комментариев (которые не поддерживаются в Internet Explorer 10), и вместо этого применяйте более стандартный подход. С этой конкретной проблемой вы должны ориентироваться на псевдо-элемент ::-ms-expand:

select::-ms-expand {
    display: none;
}

Ответ 2

Но!, Если мы хотим добавить ширину, мы не можем сделать это как:

display:none

select::-ms-expand {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 /* IE 5-7 */
 filter: alpha(opacity=0);
 /* Good browsers :) */
 opacity:0;
}

Ответ 3

Internet Explorer 10 не поддерживает условные комментарии, поэтому вам нужно будет сделать что-то еще. Одним из решений является обнюхивание пользовательского агента с помощью JavaScript и добавление класса:

<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    document.documentElement.className += " ie10";
}
</script>

Вероятно, вы должны добавить это в <head>, чтобы у вас не было флэш файла с неровным контентом, но это не проблема.

Кроме того, если вы используете jQuery, вы можете сделать что-то вроде этого:

if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    $("html").addClass("ie10");
}

Если вы хотите проверить IE10 или выше, скопируйте getInternetExplorerVersion функцию с этой страницы Microsoft, а затем измените if к чему-то вроде этого:

if (getInternetExplorerVersion() >= 10) {
    // whatever implementation you choose
}

Ответ 4

У меня возникла проблема со скрытой стрелкой вниз на сайте в IE 10 и 11, в которой я работаю, которая использует Zurb Foundation. На _form.scss была строка с

select::-ms-expand {
    display: none;
}

Я удалил его, и стрелка раскрывающегося списка начала нормально отображаться на всех браузерах. Спасибо, Джонатан за ваш ответ. Это помогло мне после долгого поиска решения.

Ответ 5

все еще не уверен, чего вы пытаетесь выполнить, но это обнаружит и добавит класс для ie10:
