Удаление стрелки у Select в IE9: CSS и JavaScript решение

Быстрый ответ

Если вы хотите скрыть стрелку элемента Select в браузере Internet Explorer и обеспечить единообразное отображение во всех браузерах, примените следующий CSS-код. Здесь приведены псевдоэлемент ::-ms-expand, специфичный для IE, и свойство appearance, поддерживаемое большинством браузеров:

select::-ms-expand {
    display: none; /* Удаляем ненужную стрелку */
}

select {
    -webkit-appearance: none; /* Для Chrome и Safari */
    -moz-appearance: none;    /* Для Firefox */
    appearance: none;         /* Для всех современных браузеров */
    background-color: white;  /* Это очень важно */
}

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

Как избавиться от назойливых стрелок выпадающего меню

Кроссбраузерность: Новый уровень

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

<div class="select-wrapper">
  <select><!-- Вот здесь будут ваши опции --></select>
</div>

.select-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Скрываем все лишнее */
    background: url('custom-arrow.svg') no-repeat right; /* Ваша избранная иконка */
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Далее стилизация: */
}

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

.select-wrapper:before {
    content: '▼'; /* На самом деле это не стрелка, а голова пикирующей чайки */
    font-family: 'Awesome Icons'; /* Ваш набор иконок */
    position: absolute;
    right: 10px;
    top: calc(50% – 0.5em); /* Центрирование на профессиональном уровне */
    pointer-events: none; /* Игнорирование кликов */
}

Подробнее об этом расскажет наш спикер на видео

Эстетика и доступность: Находим баланс

Стиль – это не только внешний вид, но и различные состояния элементов. Учтите вопросы доступности и дизайнерские требования, не забывайте создать стили для псевдоклассов :focus и :disabled элемента select:

select:focus {
    outline: none; /* Избавляемся от видимого контура */
}

select:disabled {
    opacity: 0.5; /* Выглядит потускневшим, как старинная фотография */
}

Нацеливаемся на единство стиля форм, при этом предоставляем пользователям четкую обратную связь о состоянии пользовательского интерфейса.

Спасательный круг для пользователей устаревшего IE

Для IE9 и более ранних версий, которые не поддерживают ::-ms-expand, можно применить рабочие решения на JavaScript или условные комментарии для специальных случаев:

<!--[if lte IE 9]>
<style>
    .select-wrapper { 
        /* Верные и проверенные стили для IE9 и ранних версий */ 
    }
</style>
<![endif]-->

Визуализация

До: 🧳🔽 – Ваш закрытый чемодан (элемент select) в IE.

select::-ms-expand {
    display: none; /* Ключ, с помощью которого вы скрываете замок (стрелку) */
}

После: 🧳 – Вот и ваш чемодан (элемент select) готов к путешествию без видимой стрелки.

Применяйте эти CSS-техники, чтобы улучшить взаимодействие с элементом select в Internet Explorer.

Когда встроенные решения недостаточно

Chosen.js – Ваш лучший спутник

Если вам необходим выделяющийся пользовательский интерфейс или решение более сложной задачи, вы можете привлечь надежную библиотеку как Chosen.js:

$(".your-select").chosen(); /* Да, вы – избранный */

Chosen.js предлагает мастер-класс инструментов для настройки элемента select – от поиска до мультитегов, обеспечивая однообразие отображения в различных браузерах.

Сделай сам – Создай свой JavaScript плагин

Иногда создание собственного стиля и полный контроль над элементом select приводят к разработке вашего собственного JavaScript плагина:

// Основа для вашего собственного плагина select
(function($) {
    $.fn.customSelect = function(options) {
        return this.each(function() {
            // Логика инициализации вашего плагина здесь
        });
    };
}(jQuery));

$('select').customSelect(); /* DIY в действии */

Ваш плагин предоставит покоробленные настройки поведения: от обработки кликов до визуализации опций, позволяя вам воплотить свои творческие идеи.

Полезные материалы

1. CSS-Tricks: Как отключить спиннеры для поля ввода чисел – Изучение CSS не заключается только в удалении стрелок. Это руководство по применению CSS к элементам форм, аналогично нашему удалению стрелок.
2. Stack Overflow: Как установить временную зону в UTC? — Даже если это не про IE и select, пример может оказаться полезным для понимания манипуляций с CSS-свойствами.
3. W3Schools: Как создать настраиваемый выпадающий список – Пошаговое руководство от W3Schools о создании пользовательских полей select – это альтернативный способ внести разнообразие в традиционные стили.
4. CodePen: Примеры кода — CodePen, волшебное место для разработчиков. Здесь вас ждут вдохновляющие примеры CSS.
5. Ghacks: Отключение HTML-элементов Select в браузерах — Советы по использованию CSS для отключения форм select. Это может стать последним штрихом в вашем дизайне.