How can change width of dropdown list?

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

This:

<select style="width: XXXpx;">

XXX = Any Number

Works great in Google Chrome v70.0.3538.110

Answer 6

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

CSS

#wgtmsr option {
    width: 50px;
}

Answer 7

This worked for me:

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

in Chromium and Firefox.