Comment faire pour contrôler la largeur de la balise select?

J'ai une liste de pays, dont certains avec un très long nom:

<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

Par défaut, la boîte de sélection serait aussi long que le plus long l'option dans la liste. Je voudrais créer une boîte de sélection tel qu'il présente le comportement par défaut lorsqu'il est vu à partir d'une large fenêtre de navigateur, mais qui correspond bien à 90% de conteneur largeur lorsqu'il est vu à partir d'une étroite fenêtre du navigateur, plus petite que la longueur de la plus longue option.

J'ai essayé min-width: 90%;, mais il ne fonctionne pas. Cela peut être fait par le style CSS seul?

InformationsquelleAutor Question Overflow | 2012-05-20
  1. 41

    UTILISATION style="max-width:90%;" 

    <select name=countries  style="max-width:90%;">
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

    DÉMO

    • Je ne pense pas que vous avez compris ma question. Pouvez-vous lire à nouveau? Merci.
    • Désolé. Permettez-moi de tenter une fois de plus.
    • que ok?
    • À l'aide de votre solution, la balise select sera plus que nécessaire dans une large fenêtre de navigateur.
    • Non, ça n'a pas ... n'avez-vous pas vérifié la démonstration en direct?
    • J'ai vérifié. L'affichage de la même longueur, apparemment il ne fonctionne pas sur le dernier navigateur firefox.
    • qui ver de FF u utilisez?
    • La version 12.0.
    • La mienne est de 11, Il fonctionne bien dans la mienne. Je l'ai vérifié dans IE9 et Chrome elles sont parfaites trop. Le vha vous teied redimensionner le volet de résultats pour les plus petits?
    • Oui, il a fait le travail. Oh la mienne.. je me rends compte de la raison pour laquelle il n'a pas de travail est dû à moi à l'aide de police à espacement fixe-famille. Merci.
    • Je viens de vérifier cela en 2018 et je ne vois pas une différence entre les deux méthodes dans google Chrome.
    • il semble que votre solution ne fonctionne pas dans les navigateurs actuels

    InformationsquelleAutor Krishanu Dey
  2. 8

    Vous avez tout simplement eu l'envers. En spécifiant une largeur minimale serait de rendre le menu select toujours être au moins que la largeur, de sorte qu'il continuera de s'étendre à 90% quelle que soit la taille de la fenêtre est également au moins la taille de la plus longue option.

    Vous devez utiliser max-width à la place. De cette façon, il va laisser les sélectionnez menu développer à sa plus longue option, mais si cela s'étend au-delà de votre maximum de 90% de la largeur, du croquant à cette largeur.

    • Mais comment crunch vers le bas? Puis-je avoir deux max-largeurs?
    • Le navigateur n'tous les calculs.
    • Apparemment, max-width ne fonctionne pas sur la balise select. Je suis l'aide de la dernière version de firefox, vous ne savez pas sur le reste.
    • Vous pouvez avoir des valeurs différentes de max-width (auto inclus) dans différentes situations à l'aide de Requêtes de Média. Ce dernier va vous aider à gérer ce que vous pensez d'un "étroit/large fenêtre de navigateur" pour votre conception si nécessaire. Non, navigateurs ont BEAUCOUP de liberté quand il est lié à des formes. Comme les options de recadrage de plus de sélectionner dans IE6/7...
    • bon point. Merci, je vais certainement regarder dans les media queries. Peut-on avoir une confirmation que max-width sur select est de travailler dans d'autres navigateurs. Juste un oui/non le fera. Merci.
    • N'était pas clair pour moi non, mais non, il ne sera pas: vous ne pouvez pas définir la largeur d'un parent en fonction de la largeur de son chidlren, et c'est ce que select / option sont. max-width: 90% fonctionne au moins en Fx, mais c'est 90% de la société mère div...
    • Note complémentaire sur MQ: smartphones, prenez soin de sélectionner/option, ils ont dédié de l'INTERFACE utilisateur pour qu'donc pas nécessaire de limiter la largeur ou que ce soit, qui serait contre-productif, je pense. Comme pour tablette (circa 768px), de même pour l'iPad, mais je ne sais pas ce que les autres comme la Playbook de BlackBerry et Samsung, et d'innombrables autres à faire
    • merci pour vos commentaires sur les smartphones. Vous l'avez compris mon intention tout à fait bien.

    InformationsquelleAutor animuson
  3. 2

    Ajouter div wrapper

    <div id=myForm>
<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>
</div>

    et puis écrire CSS

    #myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

    Espère que cela aidera.

    InformationsquelleAutor Rahi.Shah