Modification de la largeur de la liste déroulante IE

Dans Internet Explorer, la liste déroulante reflète la largeur de sa liste déroulante, tandis que dans Firefox, elle s'adapte à le contenu. Cette contrainte nécessite d'étendre la boîte de dépôt pour accueillir la sélection la plus longue, ce qui donne lieu à une page Web esthétiquement peu attrayante.

Solution basée sur CSS pour les largeurs variables

Pour surmonter ce problème et autorisez différentes largeurs pour la zone de dépôt et la liste déroulante à l'aide de CSS, considérez ce qui suit :

La méthode basée sur jQuery décrite ci-dessous gère tous les événements du clavier et de la souris, y compris les clics :

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

Combinez ce script avec le CSS suivant :

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

En ajoutant la classe "wide" aux éléments déroulants nécessaires, vous pouvez appliquer ces modifications. Par exemple :

    ...

Explorez une démonstration en direct dans ce jsfiddle : [link]