How can change width of dropdown list?

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?

554897 次浏览
小开

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.

小开
最佳答案

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

小开

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

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

CSS

#wgtmsr option {
width: 50px;
}
小开

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

小开

This:

<select style="width: XXXpx;">

XXX = Any Number

Works great in Google Chrome v70.0.3538.110

小开

You can style it on your CSS file using the id = #wgtmsr.

#wgtmsr{
width: 50px;
}

And then remove the style element = 'style="width: 50px;"'


提交答案