Видалити стрілку Вибір на IE

У мене є елемент вибору, я хочу видалити стрілку, потім я можу додати інший значок .. Я можу це зробити для 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;
 }

ДИВІТЬ Скрипку на IE9 . все, що мені потрібно, це зняти стрілку в ie9 Будь ласка, JSFIDDLE відповідь.

В IE9 це можливо з чисто злому, як радить @Spudley. Оскільки ви налаштували висоту та ширину ключа та виберіть, вам потрібно змінити 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. Ці ІФ використовуються для приєднання конкретних класів до 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правилі або створити новий файл шрифту значка самостійно.

У випадку, якщо ви хочете використовувати клас та псевдоклас:

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