The size attribute on a <select> tag defines the number of visible items.
With a size attribute, the select element appears as a scrollable list.
A <select> element with a size value of 4.
The control appears as a scrollable list with 4 visible options.
<form action="/tutorial/action.html">
<label for="color">Select a color</label>
<select name="color" id="color" size="4">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="brown">Brown</option>
<option value="black">Black</option>
</select><br />
<button type="submit">Submit</button>
</form>
The size attribute defines the number of visible options in the <select> element.
The select element will appear as a scrollable list, rather than a dropdown.
A scrollbar is added when the size is greater than 1 and less than the total number of options.
<select size="number">
Value | Description |
---|---|
number | Number of visible options. |
Here is when size support started for each browser:
Chrome
|
1.0 | Sep 2008 |
Firefox
|
1.0 | Sep 2002 |
IE/Edge
|
1.0 | Aug 1995 |
Opera
|
1.0 | Jan 2006 |
Safari
|
1.0 | Jan 2003 |