Удалить Выберите стрелку в IE

Ответ 1

В IE9 возможно с чисто взломать, как советовал @Spudley. Поскольку вы настроили высоту и ширину div и выберите, вам нужно изменить div:before css, чтобы они соответствовали вашим.

Если это IE10, то, используя ниже css3, возможно

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

Однако, если вас интересует плагин jQuery, попробуйте Chosen.js или вы можете создать свой собственный в js.

Ответ 2

Я предлагаю мое решение, которое вы можете найти в этом репозитории GitHub. Это работает также для IE8 и IE9 с помощью специальной стрелки, которая появляется из шрифта значка.

Примеры пользовательского Cross Browser Drop-down в действии: проверьте их со всеми браузерами, чтобы увидеть кросс-браузерную функцию.

В любом случае, давайте начнем с современных браузеров, и тогда мы увидим решение для более старых.

Стрелка вниз для Chrome, Firefox, Opera, Internet Explorer 10 +

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

Чтобы сделать это, вы должны reset стиль по умолчанию для браузера для тега select и установить новые правила фона (например, предлагаемые ранее).

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

В правилах appearance установлено значение none для reset браузеров по умолчанию, если вы хотите иметь один и тот же аспект для каждой стрелки, вы должны держать их на месте.

Правила background в примерах устанавливаются с помощью встроенных изображений SVG, которые представляют разные стрелки. Они расположены на 98% слева, чтобы сохранить некоторый запас на правой границе (вы можете легко изменить позицию по своему усмотрению).

Чтобы поддерживать правильное поведение кросс-браузера, единственное другое правило, которое нужно оставить на месте, - это outline. Это правило сбрасывает границу по умолчанию, которая появляется (в некоторых браузерах) при щелчке элемента. Все остальные правила могут быть легко изменены при необходимости.

Стрелка вниз для Internet Explorer 8 (IE8) и Internet Explorer 9 (IE9) с помощью значка

Это труднее... Или, может быть, нет.

Нет стандартного правила для скрытия стрелок по умолчанию для этих браузеров (например, select::-ms-expand для IE10 +). Решение состоит в скрыть часть раскрывающегося списка, содержащего стрелку по умолчанию, и вставить значок значка стрелки (или SVG, если хотите), аналогичный SVG, который используется в других браузерах (см. правило CSS select для более подробной информации о встроенном SVG).

Самый первый шаг - установить класс, который может распознать браузер: именно по этой причине я использовал условные IE IF в начале кода. Эти IF используются для присоединения определенных классов к тегу html для распознавания старого браузера IE.

После этого каждый select в HTML должен быть обернут div (или любым тегом, который может обернуть элемент). На этой обертке просто добавьте класс, содержащий шрифт значка.

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

В простых словах эта оболочка используется для имитации тега select.

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

Обратите внимание: мы не можем использовать границу select, потому что нам нужно скрыть стрелку по умолчанию, удлиняя ее на 25% больше, чем оболочка. Следовательно, его правая граница не должна быть видна, потому что мы скрываем это на 25% больше по правилу overflow: hidden, примененному к самому select.

Пользовательский значок значка стрелки помещается в псевдокласс :before, где правило content содержит ссылку на стрелку (в данном случае это правильная скобка).

Мы также помещаем эту стрелку в абсолютное положение, чтобы максимально ее центрировать (если вы используете разные шрифты значков, не забудьте скорректировать их, нажав верхние и левые значения и размер шрифта).

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

Вы можете легко создавать и заменять стрелку фона или стрелку шрифта значка, каждый из которых вы хотите просто изменить его в правиле background-image или создать собственный файл шрифта значка самостоятельно.

Ответ 3

Если вы хотите использовать класс и псевдокласс:

.simple-control - ваш класс css

:disabled - псевдокласс

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}