Question
I want to prevent a <textarea> from being resized by the user.
At the moment, the textarea can be resized by dragging the handle in its bottom-right corner. How can I disable that behavior?
Example HTML:
<textarea rows="5" cols="40"></textarea>
Short Answer
By the end of this page, you will understand how textarea resizing works in CSS, how to disable it with the resize property, and when it makes sense to allow, restrict, or completely prevent resizing in real projects.
Concept
A <textarea> is an HTML form element used for multi-line text input. In many browsers, users can resize it by dragging a small handle, usually in the bottom-right corner.
CSS provides the resize property to control this behavior.
The most common value for disabling resizing is:
resize: none;
This matters because resizing can affect layout and user experience:
- A resized textarea may break a carefully designed form layout.
- It may overlap nearby elements in tight UI designs.
- Some teams want consistent input sizes across the application.
However, disabling resize is not always the best choice. In some interfaces, allowing users to resize a large text input improves usability, especially when entering long content.
For <textarea>, developers often combine resize with overflow and fixed dimensions such as width, height, min-height, or max-height to control both appearance and behavior.
Basic idea:
textarea {
resize: none;
}
That tells the browser not to show a resize handle for the textarea.
Mental Model
Think of a <textarea> like a note box on a form.
- By default, the browser may give the user a little grip to stretch that box.
- The
resizeproperty is like a rule telling the browser whether that box can be stretched. resize: nonemeans: this box has a fixed size from the user's point of view.
So if the browser normally lets the user pull the corner to make it bigger, resize: none removes that option.
Syntax and Examples
The core CSS syntax is:
selector {
resize: none;
}
Disable resizing for all textareas
<textarea rows="4" cols="30"></textarea>
textarea {
resize: none;
}
This removes the resize handle from every <textarea> on the page.
Disable resizing for only one textarea
<textarea class="fixed-message" rows="4" cols="30"></textarea>
<textarea rows="4" cols="30"></textarea>
{
: none;
}
Step by Step Execution
Consider this example:
<textarea class="bio"></textarea>
.bio {
width: 250px;
height: 100px;
resize: none;
}
Here is what happens step by step:
- The browser renders a
<textarea>element. - The
.bioCSS rule matches that element because it hasclass="bio". width: 250px;sets the visible width.height: 100px;sets the visible height.resize: none;tells the browser not to allow user-driven resizing.- The bottom-right resize handle is removed or disabled, depending on the browser.
If the user types a lot of text, the textarea may still scroll internally if needed. Disabling resizing does not stop the user from typing more text; it only stops them from manually changing the box size.
Example with scrolling:
.bio {
: ;
: ;
: none;
: auto;
}
Real World Use Cases
Developers disable textarea resizing in many practical situations:
Fixed layout forms
In dashboards, admin panels, and multi-column forms, a resized textarea can break spacing or alignment.
Modal dialogs
If a textarea appears inside a small popup or modal, resizing may push content outside the visible area.
Design consistency
Teams sometimes want all fields to keep a uniform size to match a design system.
Mobile-friendly interfaces
On smaller screens, a manually resized textarea may create awkward scrolling or overlap nearby elements.
Embedded widgets
If a contact form or feedback form is embedded into another site, fixed dimensions help keep the widget stable.
That said, in content-heavy apps such as note editors, support tickets, or blog tools, allowing vertical resizing may be more user-friendly than disabling it entirely.
Real Codebase Usage
In real projects, developers usually do not apply resize: none blindly to every textarea. They use it intentionally based on layout and usability needs.
Common patterns
Component-based styling
A design system may define a textarea component like this:
.textarea {
width: 100%;
min-height: 120px;
resize: vertical;
}
.textarea--fixed {
resize: none;
}
This gives a default behavior while allowing special cases.
Guarding layout in tight spaces
For example, inside a card or modal:
.modal textarea {
resize: none;
}
This prevents the form from stretching outside its container.
Validation and UX together
A textarea may have a fixed height, scrolling, and validation styling:
.feedback-input {
width: 100%;
height: 120px;
resize: none;
overflow: auto;
: solid ;
}
{
: red;
}
Common Mistakes
1. Trying to use HTML instead of CSS
There is no standard HTML attribute like resizable="false" for <textarea>.
Broken idea:
<textarea resizable="false"></textarea>
Use CSS instead:
textarea {
resize: none;
}
2. Applying the CSS to the wrong element
If your selector targets a wrapper instead of the textarea, nothing changes.
Broken example:
<div class="message-box">
<textarea></textarea>
</div>
.message-box {
resize: none;
}
resize must be applied to the textarea itself:
Comparisons
| Option | What it does | Best use case |
|---|---|---|
resize: none | Disables resizing completely | Tight layouts, modals, embedded forms |
resize: vertical | Allows only height changes | Comment boxes, message forms |
resize: horizontal | Allows only width changes | Rarely used for textareas |
resize: both | Allows width and height changes | Flexible editing interfaces |
resize: none vs overflow: hidden
| Property | Purpose |
|---|
Cheat Sheet
/* Disable resizing */
textarea {
resize: none;
}
/* Allow only vertical resizing */
textarea {
resize: vertical;
}
/* Allow only horizontal resizing */
textarea {
resize: horizontal;
}
/* Allow both directions */
textarea {
resize: both;
}
Key points
- Use CSS, not HTML, to control textarea resizing.
- Most common solution:
textarea {
resize: none;
}
- Apply the rule directly to the
<textarea>. resizedoes not control scrolling.- Combine with
width,height, andoverflowfor better layout control.
Common combo
textarea {
width: 100%;
height: 120px;
: none;
: auto;
}
FAQ
How do I stop a textarea from being resizable?
Use CSS:
textarea {
resize: none;
}
Can I disable resizing for only one textarea?
Yes. Add a class and target that specific element:
.no-resize {
resize: none;
}
Does resize: none affect typing or scrolling?
No. It only prevents manual resizing. Users can still type normally, and scrolling depends on overflow.
Can I allow resizing in only one direction?
Yes. Use resize: vertical or resize: horizontal.
Why is my textarea still resizable?
Common reasons include:
- The CSS selector is not matching the textarea.
- Another CSS rule is overriding your rule.
- You applied
resizeto the wrong element.
Should I always disable textarea resizing?
No. If users may enter long text, allowing vertical resizing is often better for usability.
Is this done with HTML or CSS?
It is controlled with CSS, using the property.
Mini Project
Description
Build a simple feedback form with two textareas: one fixed-size message box and one vertically resizable notes box. This demonstrates how to control textarea resizing depending on the context of the form.
Goal
Create a form where one textarea cannot be resized and another can only be resized vertically.
Requirements
- Create an HTML form with at least two textarea fields.
- Make the first textarea completely non-resizable.
- Make the second textarea vertically resizable only.
- Give both textareas clear labels and visible dimensions.
- Add basic styling so the form is easy to read.
Keep learning
Related questions
Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript
Learn how to style half of a character using CSS and JavaScript, including overlay techniques for dynamic text effects.
Get Screen, Page, and Browser Window Size in JavaScript
Learn how to get screen size, viewport size, page size, and scroll position in JavaScript across major browsers.
Get the Selected Radio Button Value with jQuery
Learn how to find which radio button is selected in jQuery and get its value with simple examples and common mistakes.