How to Disable Textarea Resizing in CSS

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.

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.

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 resize property is like a rule telling the browser whether that box can be stretched.
• resize: none means: 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.

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;
}

Consider this example:

<textarea class="bio"></textarea>

.bio {
  width: 250px;
  height: 100px;
  resize: none;
}

Here is what happens step by step:

1. The browser renders a <textarea> element.
2. The .bio CSS rule matches that element because it has class="bio".
3. width: 250px; sets the visible width.
4. height: 100px; sets the visible height.
5. resize: none; tells the browser not to allow user-driven resizing.
6. 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;
}

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.

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;
}

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:

resize: none vs overflow: hidden

/* 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>.
• resize does not control scrolling.
• Combine with width, height, and overflow for better layout control.

Common combo

textarea {
  width: 100%;
  height: 120px;
  : none;
  : auto;
}

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 resize to 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.

• CSS selectors — Needed to target the correct textarea element.
• Form styling — Textareas are part of form UI design.
• CSS overflow — Often used with fixed-size textareas to handle extra content.
• Width and height in CSS — Useful for setting the visible size of a textarea.
• Box model — Helps explain how element dimensions behave in layouts.
• Responsive design — Important when deciding whether users should be allowed to resize inputs.
• User experience (UX) in forms — Disabling resize affects how comfortable a form is to use.