How do I disable the resizable property of a textarea?

coding

disable

resizable

css

textarea

How do I disable the resizable property of a textarea?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

Browsers allow users to resize many textarea elements by dragging the bottom-right handle. If you want to lock the control to a fixed size, the correct solution is CSS: set the resize property to none on the textarea.

Basic CSS Solution

The smallest working example is:

html

<textarea class="fixed-notes" placeholder="Type your notes here"></textarea>

css

1.fixed-notes {
2  width: 320px;
3  height: 120px;
4  resize: none;
5}

That removes the resize handle in modern browsers and keeps the element at the dimensions you assign.

Why `resize` Is the Right Property

The CSS resize property controls whether the user can drag to change the size of an element. For a textarea, the common values are:

'none to disable resizing'
'both to allow horizontal and vertical resizing'
'horizontal to allow only width changes'
'vertical to allow only height changes'

If you only want to restrict one direction, use a partial setting instead of disabling resizing completely:

css

1.comment-box {
2  min-height: 120px;
3  resize: vertical;
4}

That is often a better user experience for multi-line input, because people can expand the field when they need more room without breaking the layout horizontally.

A Full Example

Here is a complete page showing a non-resizable textarea with overflow handling:

html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>Fixed Textarea</title>
7  <style>
8    .fixed-notes {
9      width: 320px;
10      height: 120px;
11      padding: 12px;
12      resize: none;
13      overflow: auto;
14      box-sizing: border-box;
15    }
16  </style>
17</head>
18<body>
19  <label for="notes">Notes</label>
20  <textarea id="notes" class="fixed-notes"></textarea>
21</body>
22</html>

overflow: auto is useful here because if resizing is disabled and the content becomes longer than the visible area, the user still needs a way to scroll through the text.

Applying the Rule to All Textareas

If the requirement applies across the whole application, you can target every textarea:

css

textarea {
  resize: none;
}

That is simple, but use it carefully. In many forms, allowing vertical resize is actually helpful, especially for support tickets, comments, or long descriptions.

Accessibility and UX Considerations

Disabling resize is easy technically, but it is not always the best product decision. A fixed-height textarea can become frustrating for users entering long content, particularly on desktop where manual resizing is a useful affordance.

If your main concern is layout stability, consider one of these alternatives:

allow only vertical resizing
auto-grow the field with JavaScript
keep the field fixed but provide enough height for expected content

A simple auto-grow implementation can be more user-friendly than removing resize entirely:

html

1<textarea id="message" class="auto-grow"></textarea>
2
3<script>
4  const textarea = document.getElementById("message");
5
6  textarea.addEventListener("input", () => {
7    textarea.style.height = "auto";
8    textarea.style.height = `${textarea.scrollHeight}px`;
9  });
10</script>

That approach is not a replacement for resize: none, but it shows that layout control and usability do not have to conflict.

Common Pitfalls

Setting resize: none without making sure long content is still reachable through scrolling or another UX pattern.
Applying the rule globally to every textarea when only one field should be fixed.
Disabling resize for a long-form input where users would actually benefit from vertical expansion.
Forgetting that resize only affects manual dragging, not CSS or JavaScript size changes.
Locking the field size without testing the layout on desktop and mobile screen sizes.

Summary

Disable manual resizing with resize: none.
Set explicit width and height so the fixed size is intentional.
Keep overflow: auto when hidden content still needs to be reachable.
Consider resize: vertical if you want a better balance between layout control and usability.
Scope the CSS selector carefully so you do not disable resizing everywhere by accident.

How do I disable the resizable property of a textarea?

Master System Design with Codemia

Introduction

Basic CSS Solution

Why resize Is the Right Property

A Full Example

Applying the Rule to All Textareas

Accessibility and UX Considerations

Common Pitfalls

Summary

Why `resize` Is the Right Property