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

Question

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

这是我的代码：

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

原文由 user1844626 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个代码：

 <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 规则有冲突，覆盖了你选择的宽度

演示

原文由 Alessandro Minoccheri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 algorhythm 发布，翻译遵循 CC BY-SA 4.0 许可协议