How to stop a textarea from resizing
Short answer
resize: none removes the corner the user drags to resize the field:
<textarea rows="3" placeholder="Your message" style="resize: none; width: 260px;"></textarea>Height only
It is often more convenient to allow changing the height but not the width — this way the field does not break the page layout:
<textarea rows="3" placeholder="Drag the corner down" style="resize: vertical; width: 260px; min-height: 60px; max-height: 200px;"></textarea>min-height and max-height set the limits that cannot be exceeded.
Height by content
The new field-sizing: content property makes the field grow by itself as text is typed. Where it is not supported, the field simply stays at the regular size:
<textarea placeholder="Type several lines" style="field-sizing: content; min-height: 3lh; width: 260px; resize: none;"></textarea>Common mistake
resize: none is set on a field for long reviews and comments, together with a small height. The user writes several paragraphs in a two-line box and cannot enlarge it. Disable resizing only if the field adjusts to the text by itself or the text is known to be short.
Functions used in this recipe
- resize — Whether the user can resize an element by dragging its corner.
- <textarea> — A multi-line text field.
- min-height — The minimum height: the element is at least this tall, but can grow.
- max-height — The maximum height: the element grows with its content only up to this limit.