Free tools Windows power users keep installed
One-click scans. No signup required.
For a native HTML <select>, set the size attribute. size="1" keeps the control as a one-line dropdown; a value greater than 1 displays a scrolling list box with that many visible rows. This controls the always-visible control, not the number of rows in the browser’s opened popup.
Use size for a fixed number of visible rows
Set size directly on the select element:
<label for="country">Country</label>
<select id="country" name="country" size="6">
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
<option>Japan</option>
<option>Brazil</option>
<option>Germany</option>
<option>Australia</option>
</select>The browser shows six rows and provides scrolling when more options exist. Because this is a list box rather than a collapsed dropdown, it occupies more vertical space in the page.
As an Amazon Associate I earn from qualifying purchases.
What each value means
size value |
Native rendering | Best use |
|---|---|---|
1 |
One-line dropdown | Save space when users normally choose one item |
Greater than 1 |
Scrolling list box with that many visible rows | Make several choices visible without opening a popup |
| Omitted | Typically one visible row for a single-select; the documented default is four rows when multiple is present |
Use browser defaults only when the exact presentation is unimportant |
The value must be a positive integer. Adding multiple changes selection behavior as well as the default presentation, so do not add it merely to alter height.
Why the opened dropdown cannot be given a reliable row count
When a one-line native select is opened, its popup is drawn by the browser and operating system. The number of options visible in that popup can vary with browser, platform, available screen space and other native UI rules. There is no portable HTML or CSS setting that forces that popup to show exactly six rows.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Why CSS height is not the solution
A rule such as select { height: 3rem; } changes the closed control. It does not reliably set the height of the native popup after the control is opened. Styling support for native selects is deliberately inconsistent across browsers. The :open pseudo-class can style some open-state controls where supported, but it does not turn a native popup into a consistently sized, fully controllable panel, and it does not apply to multi-line list boxes.
Changing the visible length after JavaScript populates options
If options arrive from an API or are inserted with JavaScript, populate the element first and then set its size:
const select = document.querySelector('#country');
for (const country of countries) {
const option = document.createElement('option');
option.value = country.code;
option.textContent = country.name;
select.append(option);
}
// Six visible rows after the options have been inserted.
select.size = 6;Changing from a one-line dropdown to a six-row list can reflow the page and push content downward. Check the surrounding layout at each responsive breakpoint. If the element must not change normal document flow, position it within an intentional layout container, but test that approach with keyboard navigation, zoom and small screens.
Choose the right implementation
| Approach | Native semantics and accessibility | One-line dropdown? | Cross-browser consistency | Visual control and cost |
|---|---|---|---|---|
Native select, size="1" |
Strong built-in form semantics and keyboard behavior | Yes | Popup varies by browser and platform | Low implementation cost; limited popup styling |
Native select, size>1 |
Strong list-box semantics and keyboard behavior | No; rows remain visible | Visible row count is predictable, though surrounding rendering can differ | Low cost; page height increases |
| Custom select or replacement library | Depends on implementation; requires careful ARIA, focus and keyboard work | Can be | Potentially consistent if implemented and tested well | Highest styling control and maintenance cost |
When a custom select is justified
Use a custom control only when the native popup cannot meet a real design or interaction requirement, such as an exact panel height, search, grouped results or branded rendering. Preserve the behavior users expect from a form control:
- Provide an accessible name with a visible label or an equivalent labeling method.
- Support keyboard focus, opening, closing, selection and escape behavior.
- Keep the current value and expanded state exposed correctly to assistive technology.
- Ensure options are reachable without a mouse and remain usable at high zoom and on touch devices.
- Submit a value in the same way as the rest of the form, and test validation and browser back/forward behavior.
A replacement library can supply some of this behavior, but it still needs testing in the browsers and assistive technologies your audience uses. A native select is generally the safer choice when exact popup sizing is not essential.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Practical decision checklist
- Need a collapsed, one-line control? Keep
sizeat1or omit it for a single-select. - Need six choices visible at all times? Set
size="6"; expect a scrolling list box. - Need the opened popup itself to show exactly six rows? Native HTML cannot guarantee that across browsers.
- Are options dynamic? Insert them first, then assign
select.size. - Does the list expand the page unexpectedly? Recheck the surrounding layout rather than relying on popup sizing.
- Need exact styling or additional interaction? Evaluate a custom implementation, with accessibility and maintenance treated as part of the cost.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
