How to set width of a multiple select?

Question

I want to set default width of multiple select elements :

enter image description here

How to do that ?

score 14 · Accepted Answer · answered Jul 16 '12 at 12:13

14

Try this,

<select multiple="multiple" style="width: 200px;">

or

<select multiple="multiple" style="width: 10em;">

answered Jul 16 '12 at 12:13

Matt

1,953
1
19
42

score 3 · Answer 2 · answered Jul 16 '12 at 12:11

The same way as any other element. You write a selector that matches the element (e.g. a select element with a multiple attribute) and then use the width property.

Width applies by default to replaced inline elements (such as selects).

select[multiple] {
    width: 7em;
}

score 1 · Answer 3 · answered Jul 16 '12 at 12:11

1

Try This in css

select[multiple=multiple] {width: <default width you want>px ;}

answered Jul 16 '12 at 12:11

Yograj Gupta

9,811
3
29
48

score 1 · Answer 4 · edited May 23 '17 at 12:19

1

Take a look at the max-width property on style.

Ex:

<select name=countries  style="max-width:90%;">
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

More information: How to control the width of select tag?

edited May 23 '17 at 12:19

Community

1
1

answered Jul 22 '16 at 03:02

Ricardo França

2,923
2
18
18

score 1 · Answer 5 · answered Nov 08 '19 at 14:03

You can use "size" attribute like below:

<!DOCTYPE html>
<html>
<body>

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

How to set width of a multiple select?

5 Answers5