Modificação da largura da lista suspensa do IE

No Internet Explorer, a lista suspensa reflete a largura de sua caixa de depósito, enquanto no Firefox, ela se adapta a o conteúdo. Essa restrição exige a expansão da caixa de depósito para acomodar a seleção mais longa, resultando em uma página da web esteticamente desagradável.

Solução baseada em CSS para larguras variadas

Para superar esse problema e permitir larguras diferentes para a caixa suspensa e a lista suspensa usando CSS, considere o seguinte:

O método baseado em jQuery descrito abaixo lida com todos os eventos de teclado e mouse, incluindo cliques:

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

Combine este script com o seguinte CSS:

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

Ao adicionar a classe "wide" aos elementos suspensos necessários, você pode aplicar essas modificações. Por exemplo:

    ...

Explore uma demonstração ao vivo neste jsfiddle: [link]