Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann ich die Breite von Dropdown-Listen in verschiedenen Browsern anpassen?

Patricia Arquette
Freigeben: 2024-10-20 15:07:02
Original
165 Leute haben es durchsucht

How to Customize Dropdown List Widths Across Different Browsers?

Änderung der Breite der IE-Dropdown-Liste

Im 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 die 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 Dropdown-Liste zulassen, 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'); });
}
Nach dem Login kopieren

Kombinieren Sie dies Skript mit dem folgenden CSS:

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

Indem Sie die Klasse „wide“ zu den erforderlichen Dropdown-Elementen hinzufügen, können Sie diese Änderungen anwenden. Zum Beispiel:

<select class="wide">
    ...
</select>
Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite von Dropdown-Listen in verschiedenen Browsern anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!