web-dev-qa-db-ja.com

ドロップダウンリストの幅を変更するにはどうすればよいですか？

リストボックスがあり、その幅を減らしたい。

ここに私のコードがあります：

<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>

このコードはIE 6で機能しますが、Mozilla Firefox（最新バージョン）では機能しません。 Firefoxのドロップダウンリストのwidthを減らす方法を教えてください。

htmlcsslistdrop-down-menuhtml-select
52
user1844626

このコードを試してください：

<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;   
}

オプションの幅を変更する場合は、CSSでこれを実行できます。

#wgtmsr option{
  width:150px;   
}

たぶん、選択の幅をオーバーライドするCSSルールに競合があります

DEMO

68
Alessandro Minoccheri

ドロップダウン幅自体は設定できません。幅はオプション値に依存します。こちらもご覧ください（jsfiddle.net/LgS3C/）

選択ボックスの外観は、ブラウザによっても異なります。

独自のコントロールを構築するか、Select2を使用できます https://select2.org

8
algorhythm

!important引数を試して、CSSが指定した他のスタイルと競合していないことを確認してください。また、独自のスタイルを追加する前に reset.css を使用することをお勧めします。

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

または

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

Cssを作成し、cssコードで値style="width:50px;"を設定します。ドロップダウンリストでCSSのクラスを呼び出します。その後、動作します。

4
Vishal Bharti

この：

<select style="width: XXXpx;">

XXX =任意の数

Google Chrome v70.0.3538.110で問題なく動作します

3
Shadow in the Dark

ドロップダウンリストの幅を制御する場合は、次のようにできます。

CSS

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

これは私のために働いた：

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

chromiumとFirefoxで。

0
Wilbert Heeringa