web-dev-qa-db-fra.com

Comment peut changer la largeur de la liste déroulante?

J'ai une listbox et je veux diminuer sa largeur.

Voici mon code:

<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
  <option value="kg">Kg</option>
  <option value="gm">Gm</option>
  <option value="pound">Pound</option>
  <option value="MetricTon">Metric ton</option>
  <option value="litre">Litre</option>
  <option value="ounce">Ounce</option>
</select>

Ce code fonctionne sur IE 6 mais pas dans Mozilla Firefox (dernière version). Quelqu'un peut-il me dire s'il vous plaît comment je peux réduire la width de la liste déroulante sur Firefox?

htmlcsslistdrop-down-menuhtml-select
48
user1844626

Essayez ce code:

<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>

CSS:

#wgtmsr{
 width:150px;   
}

Si vous voulez changer la largeur de l'option, vous pouvez le faire dans votre css:

#wgtmsr option{
  width:150px;   
}

Peut-être avez-vous un conflit dans vos règles CSS qui remplace la largeur de votre sélection

DEMO

65
Alessandro Minoccheri

La largeur de la liste déroulante elle-même ne peut pas être définie. Sa largeur dépend des valeurs d'option. Voir aussi ici (jsfiddle.net/LgS3C/)

L’apparence de la zone de sélection dépend également de votre navigateur.

Vous pouvez créer votre propre contrôle ou utiliser Select2 https://select2.org

5
algorhythm

Créez un css et définissez la valeur style="width:50px;" dans css code. Appelez la classe deCSSdans la liste déroulante. Alors ça va marcher.

4
Vishal Bharti

essayez l'argument !important pour vous assurer que le CSS ne soit pas en conflit avec les autres styles que vous avez spécifiés. Également utiliser un reset.css est bien avant d’ajouter vos propres styles.

select#wgmstr {
    max-width: 50px;
    min-width: 50px;
    width: 50px !important;
}

ou 

<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
4
Amyth

Ce:

<select style="width: XXXpx;">

XXX = un nombre quelconque 

Fonctionne très bien dans Google Chrome v70.0.3538.110

3
Shadow in the Dark

Si vous souhaitez contrôler la largeur de la liste qui descend , vous pouvez le faire comme suit.

CSS

#wgtmsr option {
    width: 50px;
}
2
techfoobar

Cela a fonctionné pour moi:

ul.dropdown-menu > li {
    max-width: 144px;
}

en chrome et Firefox.

0
Wilbert Heeringa