For a native HTML <select>, the size attribute controls how many options are visible at once. Keep size="1" for normal one-line dropdown behavior; use a value greater than 1, such as size="6", to display a six-row scrolling list box. You cannot reliably force every browser’s opened native popup to show exactly six rows.
Use size to control visible options
The size attribute represents the number of options shown at once and must be a positive integer. A single-select with size="1" renders as a dropdown. When the value is greater than 1, browsers render a scrolling list box with that many visible rows.
<label for="country">Country</label>
<select id="country" name="country" size="1">
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
<option>Japan</option>
<option>Brazil</option>
<option>Germany</option>
</select>To keep the control permanently open with six visible rows, change the opening tag to size="6":
<select id="country" name="country" size="6">This is a list box, not a one-line dropdown whose popup has been resized.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Why the native opened popup cannot be sized consistently
The popup displayed after a native select receives focus is controlled by the browser and operating system. Its visible row count can vary with the browser, platform, available screen space and other native UI rules. There is no portable HTML or CSS setting that guarantees an exact number of rows in that popup.
CSS height changes the closed control
Rules such as height: 40px can change the closed select’s box, but they do not reliably set the height of the native popup that opens from it. The :open pseudo-class can style an open select in browsers that support it, but it does not turn a multi-line list box into a precisely sized native popup.
What happens with multiple
For a single-select, the default size is 1. When multiple is present, the documented default is 4 visible options. Set an explicit value when the visible row count matters:
<select name="languages" multiple size="6">
<option>English</option>
<option>French</option>
<option>German</option>
<option>Japanese</option>
<option>Spanish</option>
<option>Italian</option>
</select>Setting the size after loading options with JavaScript
If your script inserts options dynamically, populate the select first and then set its size. Setting the property after the data is available makes the intended presentation explicit.
Recommended Free Tools
const select = document.querySelector('#country');
// Add options here, if needed.
select.size = 6; // six visible rows; renders as a scrolling list boxChanging from one row to several can increase the element’s height and shift content below it. Test the resulting layout, especially when the select is inside a form, modal or responsive grid. Native rendering also differs across browsers, so verify the keyboard and pointer behavior in the browsers your users support.
Choosing between native and custom controls
| Approach | One-line dropdown | Exact cross-browser popup size | Native semantics and keyboard behavior | Visual control | Implementation cost |
|---|---|---|---|---|---|
<select size="1"> |
Yes | No | Strong, provided the label and form structure are correct | Limited by browser and platform | Low |
<select size="6"> |
No; it is a scrolling list box | Six rows in the control itself | Strong native behavior | Limited | Low |
| Custom select or replacement library | Usually | Yes, within the implementation’s layout | Depends on how completely keyboard, focus, labeling and screen-reader behavior are implemented | High | Higher development and maintenance cost |
Use a native select when
- You need reliable form semantics and built-in keyboard interaction.
- A browser-dependent popup size is acceptable.
- A permanently visible list box with a known row count meets the design.
Use a custom implementation when
- The control must remain one line while opening a panel with an exact height or row count.
- You need consistent styling that native controls do not provide.
- You can implement or maintain complete focus management, keyboard navigation, labeling, selection states and screen-reader support.
A custom control should not be chosen only for appearance: replacing a native select transfers accessibility and interaction responsibilities to your code or the library.
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
Common requirements and fixes
“I want six options visible when the dropdown opens.”
A native one-line select cannot guarantee that result. Use size="6" if a permanently visible scrolling list is acceptable; otherwise use a carefully implemented custom select.
“Why did size="6" remove the arrow?”
Values above 1 select the list-box rendering defined for multi-row controls. The arrow-style dropdown presentation is associated with the one-row state.
Best Value
“Can JavaScript change the number of visible rows?”
Yes. Set the element’s size property, preferably after inserting the options. Remember that the control’s height and surrounding layout may change.
“Can CSS set the opened select’s height?”
Not reliably for the native popup. CSS can style the closed element, and supported browsers may expose open-state styling, but popup dimensions remain browser and platform dependent.
Quick Recap
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.
