Änderung der Breite der IE-Dropdown-Liste

In Internet Explorer spiegelt die Dropdown-Liste die Breite ihrer Dropbox wider, während sie sich in Firefox daran anpasst der Inhalt. Diese Einschränkung erfordert eine Erweiterung der Dropbox, um die längste Auswahl aufzunehmen, was zu einer ästhetisch unansehnlichen Webseite führt.

CSS-basierte Lösung für unterschiedliche Breiten

Um dieses Problem zu lösen und Wenn Sie mithilfe von CSS unterschiedliche Breiten für die Dropbox und die Dropdown-Liste zulassen möchten, beachten Sie Folgendes:

Die unten beschriebene jQuery-basierte Methode verarbeitet alle Tastatur- und Mausereignisse, einschließlich Klicks:

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

Kombinieren Sie dieses Skript mit dem folgenden CSS:

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

Durch Hinzufügen der „wide“-Klasse zu den erforderlichen Dropdown-Elementen können Sie diese Änderungen anwenden. Zum Beispiel:

    ...

Erkunden Sie eine Live-Demonstration in dieser jsfiddle: [link]