Разная ширина dropdown-списка в IE и Firefox: решение CSS

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

Чтобы настроить ширину выпадающего списка в браузере Internet Explorer, вы можете использовать фиксированную ширину для тега <select> :

<select style="width:200px!important;">
  <option>Опция 1</option>
  <option>Опция 2</option>
  <!-- И другие опции -->
</select>

Став правило !important, вы сможете обеспечить единую ширину, даже игнорируя некоторые рекомендации UX, заставив элемент вести себя предсказуемым образом.

Глубокое решение с помощью jQuery и CSS

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

Устранение различий в поведении браузеров

IE и Firefox обрабатывают ширину выпадающих списков по-разному. jQuery помогает решить эту проблему:

$('select').on('mousedown', function(){
  // Расширение при нажатии
  $(this).addClass('wide');
}).on('change blur', function(){
  // Возврат к изначальному размеру после выбора или потери фокуса
  $(this).removeClass('wide');
});

CSS класс wide позволяет выпадающему списку расшириться:

select.wide { width: auto; /* Будто распахнув крылья */ }

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

jQuery обрабатывает все события

С помощью jQuery легко управлять событиями мыши и клавиатуры, это упрощает взаимодействие с выпадающим списком и делает его ширину динамической.

Важность внешнего вида

Чтобы починить контент, превышающий доступное пространство, предотвратите переполнение и добавьте многоточие:

select option {
  overflow: hidden; /* Предотвращение переполнения */
  text-overflow: ellipsis; /* Замена переполнения многоточием */
  white-space: nowrap; /* Без переносов */
}

Визуальный пример на JsFiddle

Теория хороша, но лучше всего увидеть всё своими глазами. Попробуйте использовать JsFiddle, чтобы проверить эффективность представленных методов.

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

Воспринимайте выпадающий список как предмет мебели, который нужно протащить через дверной проём:

В IE список похож на предмет мебели с жёстко заданной шириной:

🛋️🚪💨 (В IE)

В других браузерах размеры динамически подстраиваются:

🛋️🚪↔️🛋️ (В других браузерах)

Важно помнить: Размеры в IE всегда статичны и неэластичны!

Мастерство управления выпадающими списками

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

Адаптивность – ключ к успеху

В современный период адаптивного дизайна отдайте предпочтение медиа-запросам, а не фиксированной ширине:

select { width: 100%; max-width: 300px; }
@media (max-width: 600px) {
  select { width: 75%; }
}

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

1. Полное руководство по элементу Table | CSS-Tricks — полезные советы по работе с таблицами в HTML.
2. Свойство CSS max-width | W3Schools — познакомьтесь с max-width, крайне важным для адаптивного дизайна.
3. :focus – CSS | MDN — подробное изучение стилей :focus, влияющих на внешний вид элементов формы.
4. Can I use... | caniuse.com — проверьте, совместимы ли ваши стили и функции с разными браузерами.
5. CSS :hover селектор | W3Schools — стилизация наведения курсора на элементы интерфейса.