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

У меня есть элемент select, я хочу удалить стрелку, затем я могу добавить другой значок ... Я могу сделать это для Firefox Safari и Chrome, но это не сработало в IE9 .

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

СМОТРИ Fiddle в IE9 . все, что мне нужно, это удалить стрелку в ie9. Ответьте JSFIDDLE.

В IE9 это возможно с помощью простого взлома, как советует @Spudley. Поскольку вы настроили высоту и ширину div и выберите, вам нужно изменить div:beforecss в соответствии с вашим.

В случае, если это IE10, то с использованием ниже css3 возможно

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

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

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

Примеры настраиваемого раскрывающегося списка кроссбраузерности в действии: проверьте их во всех своих браузерах, чтобы увидеть возможность кроссбраузерности.

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

Выпадающая стрелка для Chrome, Firefox, Opera, Internet Explorer 10+

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

Для этого вам необходимо сбросить стиль браузера по умолчанию для 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правил установлено значение «Нет», чтобы сбросить настройки браузеров по умолчанию, если вы хотите иметь одинаковый аспект для каждой стрелки, вы должны оставить их на месте.

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

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

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

Это сложнее ... А может, и нет.

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

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

После этого каждый элемент selectHTML должен быть обернут 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правиле или создав новый файл шрифта значка самостоятельно.

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

.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;
}