Comment personnaliser la largeur des listes déroulantes dans différents navigateurs ?

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 entraîne 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 liste déroulante 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 cela 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 :

<select class="wide">
    ...
</select>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!