webentwicklung-frage-antwort-db.com.de

Wie kann die Breite der Dropdown-Liste geändert werden?

Ich habe eine Listbox und möchte deren Breite verringern.

Hier ist mein 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>

Dieser Code funktioniert auf IE 6, jedoch nicht in Mozilla Firefox (neueste Version). Kann mir jemand bitte sagen, wie ich die width der Dropdown-Liste in Firefox verringern kann?

htmlcsslistdrop-down-menuhtml-select
48
user1844626

Versuchen Sie diesen 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;   
}

Wenn Sie die Breite der Option ändern möchten, können Sie dies in Ihrer CSS tun:

#wgtmsr option{
  width:150px;   
}

Möglicherweise haben Sie einen Konflikt in Ihren CSS-Regeln, der die Breite Ihrer Auswahl überschreibt

DEMO

65
Alessandro Minoccheri

Die Dropdownbreite selbst kann nicht eingestellt werden. Die Breite hängt von den Optionswerten ab. Siehe auch hier (jsfiddle.net/LgS3C/)

Wie das Auswahlfeld aussieht, hängt auch von Ihrem Browser ab.

Sie können Ihre eigene Kontrolle erstellen oder Select2 https://select2.org verwenden.

5
algorhythm

Erstellen Sie eine CSS und setzen Sie den Wert style="width:50px;" in css code. Rufen Sie die Klasse vonCSSin der Dropdown-Liste auf. Dann wird es klappen.

4
Vishal Bharti

versuchen Sie das Argument !important, um sicherzustellen, dass das CSS keinen Konflikt mit anderen von Ihnen angegebenen Stilen hat. Auch die Verwendung einer reset.css ist gut, bevor Sie eigene Styles hinzufügen.

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

oder 

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

Diese:

<select style="width: XXXpx;">

XXX = eine beliebige Anzahl 

Funktioniert hervorragend in Google Chrome v70.0.3538.110

3
Shadow in the Dark

Wenn Sie die Breite der Liste steuern möchten, die abfällt, können Sie dies folgendermaßen tun.

CSS

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

Das hat für mich funktioniert:

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

in Chromium und Firefox.

0
Wilbert Heeringa