Удалить стрелку выбора в 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;
 }

посмотреть Скрипка on IE9. все что мне нужно-это удалить стрелку в IE9 Пожалуйста JSFIDDLE ответа.

3 ответов


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

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

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

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


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

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

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

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

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

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

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

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

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

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

это самая сложная часть... А может и нет.

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

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

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

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

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

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

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

пользовательский значок стрелки-шрифт помещается в псевдо-класс :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;
}