How do I disable the resizable property of a textarea?

To disable the resizable property of a <textarea> in HTML, you can use CSS to override the default behavior. The resize property controls whether a user can adjust the size of the textarea. Here’s how to do it:

1. Using CSS

Set the resize property to none for the textarea:

textarea {
  resize: none;
}

This will disable resizing in all directions (horizontal, vertical, and diagonal).

2. Inline Style (Quick Fix)

If you prefer inline styles:

<textarea style="resize: none;"></textarea>

3. Restrict Resizing to Specific Directions

While not required for disabling, the resize property also supports:

horizontal: Allow only horizontal resizing.
vertical: Allow only vertical resizing.
both: Allow both directions (default behavior).

Example:

textarea {
  resize: vertical; /* User can resize vertically only */
}

Browser Compatibility

Supported in all modern browsers (Chrome, Firefox, Safari, Edge).
No longer requires vendor prefixes (e.g., -moz-resize, -webkit-resize).

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    textarea.no-resize {
      resize: none;
    }
  </style>
</head>
<body>
  <textarea class="no-resize">This textarea cannot be resized.</textarea>
</body>
</html>

Why This Works

The resize: none; CSS rule removes the drag handle (the small triangle/gripper at the bottom-right corner).
The textarea’s dimensions become fixed unless explicitly changed via JavaScript/CSS.

By using this method, you ensure the textarea remains a fixed size regardless of user interaction.