HTML attribute: size

Thesize attribute defines the width of the <input> and the height of the<select> element. For aninput element, it defines the number of characters that the user agent allows the user to see when editing the value. For aselect element, it defines the number of options that should be shown to the user. This must be a valid non-negative integer greater than zero.

If nosize is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.

Thesize attribute has no impact on constraint validation.

Try it

<label for="firstName">First Name:</label><input name="firstName" type="text" size="10" /><label for="lastName">Last Name:</label><input name="lastName" type="text" size="20" /><label for="fruit">Favorite fruit:</label><select name="fruit" size="2">  <option>Orange</option>  <option>Banana</option>  <option>Apple</option></select>

label {  display: block;  margin-top: 1rem;}

Examples

By addingsize on some input types, the width of the input can be controlled. Adding size on a select changes the height, defining how many options are visible in the closed state.

html

<label for="fruit">Enter a fruit</label><input type="text" size="15" /><label for="vegetable">Enter a vegetable</label><input type="text" /><select name="fruits" size="5">  <option>banana</option>  <option>cherry</option>  <option>strawberry</option>  <option>durian</option>  <option>blueberry</option></select><select name="vegetables" size="5">  <option>carrot</option>  <option>cucumber</option>  <option>cauliflower</option>  <option>celery</option>  <option>collard greens</option></select>