Видалення стрілки вибору елемента IE10

75

Отже, з 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;однак не працює. То що я можу тут зробити?

css internet-explorer-10 conditional-statements

— Парріс
джерело

що? ви хочете встановити вигляд: none для ie10, як ви створюєте стиль для gecko та firefox? ie10 повинен отримувати цей стиль, якщо його встановлено у вашій таблиці стилів. Ви можете націлити інші групи за допомогою умовних умов і подати основну таблицю стилів для справжніх браузерів

— Альберт,

зовнішній вигляд @albert: жодного виду робіт. Це не видаляє стрілку для поля вибору.

— Парріс,

ах мб. то яке ваше запитання? як виявити і клас до ie10?

— Альберт

@albert, я думаю, я задавав 2 питання. Чи можемо ми видалити стрілку вибору, як, а як ні, як можна додати умовний для ie10.

— Парріс

idk про його видалення, оскільки ie10 не підтримує <code> вигляд </code>, але я відповів нижче, як націлити ie10 та додати клас до елемента <code> html </code>

— Альберт,

298

Уникайте нюхання браузера та умовних коментарів (які не підтримуються станом на Internet Explorer 10), а замість цього використовуйте більш стандартний підхід. З цією конкретною проблемою ви повинні націлитись на ::-ms-expandпсевдоелемент:

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

— Сампсон
джерело

1

@Parris Дякую. Сподіваюся, вам буде зручніше впроваджувати це рішення, ніж інші популярні підходи.

— Семпсон,

@JonathanSampson я насправді шукав таких змін.

— Парріс,

2

Це надзвичайно дякую: D, на жаль, це не працює в IE9, хоча :(

— Pawcu

@JonathanSampson Я хочу приховати стрілку спадного меню за замовчуванням у ie-8 & ie-9, я не знаю, як це зробити в ie-8 & ie-9, будь ласка, надайте мені рішення

— user2681579

@ user2681579 Ви не можете видалити це для IE8 або IE9; вам потрібно буде замінити власний елемент скриптовою альтернативою або знайти спосіб замаскувати цю частину елемента select. На мій погляд, краще просто замінити його.

— Семпсон,

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

— Сергій
джерело

1

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
}

— Еван Ган
джерело

0

У мене виникла проблема із прихованою стрілкою спадного меню на веб-сайті в IE 10 та 11, який я працюю, який використовує Zurb Foundation . На _form.scss був рядок, який мав

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

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

— ранджієш
джерело

1

Будь ласка, використовуйте коментарі для такого роду речей, а не додаткову відповідь.

— Бен Блек

Несподівана поведінка Фонду Цурба привела мене сюди, дякую за відповідь або коментар! ;)

— Патрік Джонс

-1

все ще не впевнений, що ви намагаєтесь досягти, але це виявить і додасть клас для ie10:


— Альберт
джерело

не впевнений, чому це було проголосовано ... я думаю, відповідь Джонатана Семпсона є більш елегантною, і її слід обирати. але вниз проголосували? слабкий. соус.

— Альберт,

Це проти, тому що це хакерська спроба змусити IE10 розпізнати умовні коментарі. "Стандартним підходом" прийнятої відповіді є використання таких псевдоелементів постачальника: msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx

— Benxamin

1. Ваша техніка порушена в режимі стандартів IE відповідно до посилання у відповіді Евана (умовні умови HTML видалено в IE10, а умови JS видалено в IE11 - оскільки вони були нестандартними). 2. Префікси постачальників є стандартним способом обробки певних функцій браузера.

— робот

дякую за урок історії. я добре знаю, і ця техніка все ще працює

— Альберт,