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

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 2

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