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

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(最新版本).任何人都可以告诉我如何减少widthFirefox上的下拉列表？

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规则中有一个冲突,它会覆盖你选择的宽度

DEMO

Answer 2

下拉宽度本身无法设置.它的宽度取决于选项值.另见这里(jsfiddle.net/LgS3C/)

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

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

Answer 3

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

Answer 4

这个：

<select style="width: XXXpx;">

XXX = 任何数字

在 Google Chrome v70.0.3538.110 中运行良好

Answer 5

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