Изменение ширины раскрывающегося списка IE

В Internet Explorer раскрывающийся список отражает ширину раскрывающегося списка, а в Firefox он адаптируется к содержание. Это ограничение требует расширения раскрывающегося списка для размещения самого длинного выбора, в результате чего веб-страница становится эстетически непривлекательной.

Решение на основе CSS для различной ширины

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

Метод на основе jQuery, описанный ниже, обрабатывает все события клавиатуры и мыши, включая клики:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Объедините этот скрипт со следующим CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Добавив класс «широкий» к необходимым элементам раскрывающегося списка, вы можете применить эти изменения. Например:

    ...

Изучите живую демонстрацию в этом jsfiddle: [ссылка]