The HTML size attribute
On a text input, the HTML size attribute sets the visible width in characters, 20 by default. A <select> with size="4" becomes a list box showing four rows. Size doesn't limit how much people can type.
Overview
The HTML size attribute sets how big a form control looks, not what it can hold. On an <input> it is a width counted in characters, and on a <select> it is a number of option rows. The value must be a whole number above zero.
The HTML standard applies it to text, search, tel, url, email and password inputs. Chrome ignores it elsewhere, while Firefox still sizes a number input by it. In both, a missing, zero or unreadable size means 20 characters, and the size property reports 20.
A character here means an average one. For size="10", the HTML standard makes the field nine average characters wide plus one of the font's widest. In common proportional fonts such as Arial and Times New Roman, ten M letters overflow that field, while ten digits fit.
A size of 2 or more gives a select that many visible rows in a list box. Without size, a select shows one row, or four with multiple, and its size property returns 0 for historical reasons.
A list box also changes what the form sends. A drop-down selects its first option on its own, but a list box waits for the user, so nothing is submitted for it until someone picks an option. A required list box blocks the form until then.
Syntax
<label for="zip">ZIP code</label>
<input id="zip" name="zip" size="5" maxlength="5">
<label for="day">Delivery day</label>
<select id="day" name="day" size="3">
<option>Monday</option>
<option>Wednesday</option>
<option>Friday</option>
</select>Values
| Value |
|---|
| A positive integer. |
Example
<form id="order">
<p style="margin:0 0 8px">
<label for="zip">ZIP code</label>
<input id="zip" name="zip" size="5" maxlength="5" value="94103">
</p>
<p style="margin:0 0 8px">
<label for="note">Note</label>
<input id="note" name="note" value="Leave the parcel at the side door">
</p>
<label for="day">Delivery day</label><br>
<select id="day" name="day" size="3">
<option>Monday</option>
<option>Wednesday</option>
<option>Friday</option>
</select>
<button>Show form data</button>
<p id="msg" role="status"></p>
</form>
<p>Press Show form data, then pick a day and press it again.</p>
<script>
const form = document.getElementById('order');
const msg = document.getElementById('msg');
form.addEventListener('submit', function (e) {
e.preventDefault();
const data = new FormData(form);
msg.textContent = data.has('day') ? 'Sends day=' + data.get('day') + '.' : 'No day is sent until you pick one.';
});
</script>Best practices
- Use CSS width instead of
sizewhen a field has to match your layout exactly. Once CSS sets a width, size no longer changes how wide the field looks. - Let a field grow with its text through the CSS
field-sizing: contentdeclaration, which overrides size. Chrome and Edge added it in version 123, Firefox in 152 and Safari in 26.2. - Preselect the usual choice in a list-box select with selected when the form needs a default.
- Plan for phones that ignore a select's size. Safari on iOS has no support for it, and Chrome on Android added it in version 142.
Accessibility
The size attribute also changes how a select is exposed to assistive technology. A select shown as a drop-down has the implicit role combobox. A size of 2 or more makes it a list box, whose implicit role is listbox.
