如何更改下拉列表的宽度？

我有一个列表框，我想减小其宽度。

这是我的代码：

<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（最新版本）中无效。有人可以告诉我如何减少widthFirefox上的下拉列表吗？

试试这个代码：

<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规则中有一个冲突，该冲突覆盖了您选择的宽度

演示

下拉宽度本身无法设置。它的宽度取决于选项值。另请参阅此处（jsfiddle.net/LgS3C/）

选择框的外观还取决于您的浏览器。

您可以构建自己的控件或使用Select2 https://select2.org

这个：

<select style="width: XXXpx;">

XXX =任何数字

在Google Chrome v70.0.3538.110中运行良好

尝试使用该!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;">

创建一个CSS并style="width:50px;"在CSS代码中设置值。在下拉列表中调用CSS类。然后它将起作用。

如果要控制下拉列表的宽度，可以执行以下操作。

的CSS

#wgtmsr option {
    width: 50px;
}

这对我有用：

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

在Chromium和Firefox中。