HTML size Attribute

Introduction

The size attribute controls how much of a form control is visible before scrolling. On <select>, it sets the number of visible option rows in a list box. On text-like <input> elements, it sets the approximate width in characters. It is not the same as the responsive sizes attribute on <img> or deprecated <font size> markup.

What You’ll Learn

Purpose of size

The purpose of the size attribute is to give authors a simple HTML-level control over how much of a form field is shown. For a <select>, a higher size turns the control from a compact dropdown into a scrollable list box that displays multiple options at once—useful for picking from long lists without opening a menu.

For <input type="text"> and similar types, size hints how many characters wide the field should appear. Browsers approximate this using the current font; for precise layout, CSS width is usually better.

📝 Syntax

Set size to a positive integer on <select> or supported <input> types:

<!-- List box: 5 visible rows -->
<select size="5">...</select>

<!-- Text input ~30 characters wide -->
<input type="text" size="30">

Syntax Rules

• Value is a non-negative integer (typically 1 or greater).
• On <select>: default is 1 (dropdown). Values > 1 show a list box.
• On <input>: applies to text, search, tel, url, email, and password.
• Default input width is often 20 characters if size is omitted.
• Does not limit how many characters the user can type—only visible width.
• Pair list boxes with <label> and consider multiple for multi-select lists.

💎 Values

The size attribute accepts an integer. Meaning depends on the element:

• size="1" on <select> — Standard single-line dropdown (default).
• size="5" on <select> — List box showing five option rows at once.
• size="20" on <input type="text"> — Field roughly 20 characters wide.
• size="50" on <input type="email"> — Wider email field hint.

<select size="4" multiple>
  <option>Red</option>
  <option>Green</option>
  <option>Blue</option>
  <option>Yellow</option>
  <option>Purple</option>
</select>

Applicable Elements

size vs sizes vs CSS width

Examples Gallery

select list box with five visible rows, input character width, and dynamic element.size in JavaScript.

<select size="5">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
  <option value="option5">Option 5</option>
  <option value="option6">Option 6</option>
</select>

<label for="username">Username:</label>
<input type="text" id="username" name="username" size="30">

<select id="dynamicSelect">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

<script>
  document.getElementById("dynamicSelect").size = 3;
</script>

♿ Accessibility

• Label every control — List boxes and inputs need <label for="..."> associations.
• Do not rely on size alone — A tiny list box can hide options from sighted users; ensure scrolling is obvious.
• Avoid overwhelming list boxes — Very large size values on long lists can clutter the page; consider search/filter UI.
• Keyboard support — Native <select> list boxes support arrow keys; custom widgets need equivalent behavior.
• Mobile layouts — Test list boxes on small screens; CSS width often works better than large character counts.

💡 Best Practices