76

I have a listbox and I want to decrease its width.

Here is my 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>

This code works on IE 6 but not in Mozilla Firefox (latest version). Can anybody please tell me how I can decrease the width of the dropdown list on Firefox?

4

7 回答 7

88

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

If you want to change the width of the option you can do this in your css:

#wgtmsr option{
  width:150px;   
}

Maybe you have a conflict in your css rules that override the width of your select

DEMO

于 2012-12-18T11:11:34.427 回答
10

The dropdown width itself cannot be set. It's width depend on the option-values. See also here ( jsfiddle.net/LgS3C/ )

How the select box looks like is also depending on your browser.

You can build your own control or use Select2 https://select2.org

于 2012-12-18T11:16:53.343 回答
6

try the !important argument to make sure the CSS is not conflicting with any other styles you have specified. Also using a reset.css is good before you add your own styles.

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

or 

<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
于 2012-12-18T11:13:10.313 回答
6

This:

<select style="width: XXXpx;">

XXX = Any Number

Works great in Google Chrome v70.0.3538.110

于 2018-11-28T20:10:05.250 回答
5

Create a css and set the value style="width:50px;" in css code. Call the class of CSS in the drop down list. Then it will work.

于 2012-12-18T11:09:58.800 回答
2

If you want to control the width of the list that drops down, you can do it as follows.

CSS

#wgtmsr option {
    width: 50px;
}
于 2012-12-18T11:13:35.690 回答
-1

This worked for me:

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

in Chromium and Firefox.

于 2018-12-21T12:41:35.953 回答