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?

Possible duplicate of [Set width of dropdown element in HTML select dropdown options](https://stackoverflow.com/questions/1702186/set-width-of-dropdown-element-in-html-select-dropdown-options) — StardustGogeta, Jun 21 '17 at 21:12
Why don't you change the width according to the width of the content? https://stackoverflow.com/questions/20091481/auto-resizing-the-select-element-according-to-selected-options-width/55343930#55343930 — João Pimentel Ferreira, May 03 '20 at 19:27

Alessandro Minoccheri · Accepted Answer · 2014-07-10T16:37:12.983

90

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

edited Jul 10 '14 at 16:37

answered Dec 18 '12 at 11:11

Alessandro Minoccheri

35,521
22
122
171

5

How is that any different than what the OP has? – Chris Dec 18 '12 at 11:13
2

Inline `style` definitions override every other styling (unless there's `!important`), so I don't think so. The OP's original code works fine even on Firefox 17.0.1. – Chris Dec 18 '12 at 11:15
1

@Abody97 maybe he has a conflict in his css – Alessandro Minoccheri Dec 18 '12 at 11:17
1

Thank you so much for your help. yes, the option width wasn't working but now using #wgtmsr option{width:50px;} its working(working by using class too).but before I put width style in every option tag as well as in select tag but that didn't work. yes may be that was overriden. – user1844626 Dec 18 '12 at 11:31
1

@Chris or unless you override them with `element[style]` in your css. – Pere Dec 31 '14 at 11:50
5

FYI This does not seem to make any difference on Chrome or IE11, it does however as the OP asked work for Firefox, I was looking for something a little more generic... :( – PJUK Nov 17 '15 at 16:46
select {} never worked but using the name worked great! – AShah Mar 30 '21 at 21:15
It will not work if the option length is long. – Nandeep Barochiya Dec 03 '21 at 07:05
I came here to find a solution if the option visible text content is way too large, assume "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" and the solution in the fiddle does absolutely nothing to prevent this. – somedotnetguy Apr 17 '23 at 15:28

algorhythm · Answer 2 · 2018-09-13T07:16:47.653

11

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

edited Sep 13 '18 at 07:16

answered Dec 18 '12 at 11:16

algorhythm

8,530
3
35
47

Shadow in the Dark · Answer 3 · 2018-11-30T12:39:07.580

9

This:

<select style="width: XXXpx;">

XXX = Any Number

Works great in Google Chrome v70.0.3538.110

edited Nov 30 '18 at 12:39

answered Nov 28 '18 at 20:10

Shadow in the Dark

91
1
2

score 6 · Answer 4 · edited Dec 18 '12 at 11:38

6

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.

edited Dec 18 '12 at 11:38

mychalvlcek

3,956
1
19
34

answered Dec 18 '12 at 11:09

Vishal Bharti

185
1
9

score 6 · Answer 5 · answered Dec 18 '12 at 11:13

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

answered Dec 18 '12 at 11:13

Amyth

32,527
26
93
135

Did you actually try what you're suggesting? If you did, you might notice that the OP's original code already works. – Chris Dec 18 '12 at 11:17
that is why i am suggesting him to use the `!important` argument to make sure the code is not conflicting with other styles. – Amyth Dec 18 '12 at 11:19
Adding `!important` is the only thing which worked for me. I always forget about it. – Tass Nov 02 '16 at 14:31

score 2 · Answer 6 · answered Dec 18 '12 at 11:13

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

answered Dec 18 '12 at 11:13

techfoobar

65,616
14
114
135

10

This doesn't seem to be working, at least not in Chrome. – Maximillian Laumeister Feb 17 '16 at 19:18

score 0 · Answer 7 · answered Oct 05 '22 at 10:07

0

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

#wgtmsr{
  width: 50px;
}

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

answered Oct 05 '22 at 10:07

OwethuSotomela

1
2

How can change width of dropdown list?

7 Answers7

Linked