web-dev-qa-db-fra.com

Réglage de la hauteur d'un SELECT dans IE

IE semble ignorer la hauteur définie dans CSS lors du rendu d'un SELECT HTML. Y a-t-il un moyen de contourner ce problème ou devons-nous simplement accepter IE ne sera pas aussi beau que les autres navigateurs?

htmlcssinternet-explorer
29
Craig

Il n'y a pas de solution de rechange à cela, si ce n'est de supprimer l'élément select.

22
Ken Browning

Il est vrai qu'il n'y a pas de solution de rechange à cela, mis à part l'amerrissage de l'élément select, mais si vous ne devez afficher que plus d'éléments dans votre liste de sélection, vous pouvez simplement utiliser l'attribut size:

<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

Ce faisant, vous aurez des lignes vides supplémentaires si la longueur de votre collection d'éléments est inférieure à la valeur de la taille.

16
JackNova

vous pouvez utiliser une combinaison de taille de police et de hauteur de trait pour le forcer à augmenter, mais uniquement dans les cas où vous avez également besoin de la police

modifier: 

Exemple -> http://www.bse.co.nz EDIT: (ce lien n'est plus pertinent)

la sélection à côté du grand champ de recherche a les règles CSS suivantes:

#navigation #search .locationDrop {
    font-size:2em;
    line-height:27px;
    display:block;
    float:left;
    height:27px;
    width:200px;
}
7
Darko Z

Oui, vous pouvez. 

J'ai été en mesure de définir la hauteur de ma SELECT sur exactement ce que je voulais dans IE8 et 9. L'astuce consiste à définir la propriété box-sizing sur content-box. Cela fixera la zone de contenu de SELECT à la hauteur, mais gardez à l'esprit que les valeurs margin, border et padding ne seront pas calculées dans la largeur/hauteur de la SELECT, ajustez donc ces valeurs en conséquence.

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

Voici un travail jsFiddle . Souhaitez-vous confirmer et marquer la réponse appropriée? 

5
Joshua

Il existe un moyen de contourner ce problème (au moins pour la sélection multiple):

  • définir select size attribut à la taille de la liste d'options (utilisez JavaScript ou définissez-le sur un nombre suffisamment grand)
  • définir select max-height au lieu de height attribut à la hauteur désirée (testé sur IE9)
3
Daimonion

Même si définir une valeur CSS height sur l'élément select ne fonctionne pas, l'attribut padding fonctionne correctement . Définir un remplissage supérieur et inférieur donnera à votre élément select une apparence plus grande.

3
brett

Enfin trouvé dans http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html Une solution simple (au moins pour IE8):

font-size:      1.0em;

BTW, pour Google Chrome, a trouvé cette solution de contournement à Comment standardiser la hauteur d’une zone de sélection entre Chrome et Firefox? * /

-webkit-appearance: menulist-button;
3
user640811

Utilisez une bibliothèque d’interface utilisateur, telle que jquery ou yui , qui offre une alternative à l’élément SELECT naturel, généralement utilisée dans l’implémentation d’une boîte à options.

3
Sparr

Vous pouvez utiliser un remplacement: jQuery Chosen . Ça a l'air génial.

2
Andres SK
select{
  *zoom: 1.6;
  *font-size: 9px;
}

Si vous modifiez les propriétés, la taille de select sera également modifiée dans IE7.

2
rostowner

Voir aussi Modèle de boîte incohérente entre les entrées, sélectionnez, ...

1
Michal Čizmazia

vous pouvez faire comme ce que fait Facebook, ajoutez simplement un rembourrage. Ce n'est pas aussi bon qu'on pourrait le souhaiter, mais ça a l'air assez bien.

1
bachstein

je voulais que la hauteur de la zone de sélection soit plus petite que celle par défaut. j'ai utilisé

select {
   position: relative;
   height: 10px !important;
   display: inline-block;
}

cela fonctionne sur ie7 et ie8. vous n’auriez peut-être besoin que de la propriété height, je viens d’ajouter les position et display pour remplacer les propriétés héritées du haut du dom.

0
mulllhausen

Pas sûr, mais je pense que c'était une question non pas de la hauteur d'un élément de sélection 'multiple' mais d'un type d'élément de liste déroulante. J'ai rencontré des moments où la liste déroulante semble réduite et ne montre pas clairement la valeur sélectionnée. Il ne fait aucun doute que cela concerne les informations de style CSS utilisées sur la page. La seule façon de l'arrêter est soit de changer le CSS (ce qui affecterait probablement la page entière ou des parties de celle-ci d'une manière que vous ne souhaitez pas affecter) ou d'utiliser les informations de style dans l'élément select lui-même pour remplacer le CSS qui le recouvre. Exemple:

<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>

J'espère que cela t'aides.

0
Matt Campbell