How do I disable the resizable property of a textarea?

Step-by-step guide to tweaking and alternatives

Set controls on resize limits

You may want to put up boundaries using good old CSS properties like max-width, max-height, min-width, and min-height to restrain the textarea from going beyond the designated size parameters:

textarea {
  resize: both;
  max-width: 500px; /* Meet my big big brother */
  max-height: 300px; /* Hey, I won't grow taller than this */
  min-width: 200px; /* I won't shrink any further, promise! */
  min-height: 100px; /* I'm not that tiny */
}


Empower direction-specific resizing

When resizing along both axes isn't really your thing, allow adjustments just along a single direction—vertical or horizontal:

/* Vertical resize only */
textarea { resize: vertical; /* I am a flagpole, purely vertical */ }

/* Horizontal resize only */
textarea { resize: horizontal; /* I am a ladder, purely horizontal */ }


Precise targeting with classes and IDs

Use a class or ID to apply the resize: none; rule. This allows you to selectively regulate which textareas aren't allowed the resizing feature:

/* By class */
.textarea-nonresizable { resize: none; /* We do not condone resizing here */ }

/* By ID */
#uniqueTextarea { resize: none; /* I am unique and I dislike resizing */ }


Overflow matters

Notice that the resize property works if overflow ain't visible. Remember this while styling your textarea:

textarea {
  overflow: auto;
  resize: none; /* Hey overflow, thanks for the support! */
}


Check your browser compatibility

The CSS resize might have compatibility issues with older browsers. So, check out Can I use... to stay sure.

Disabling resizing—only if you must!

Think twice, thrice, or as many times as you need before you disable resizing. Your users might need resizing, so, tread carefully!

Additional tips and tricks to supercharge your textareas

Spark help text with placeholder attribute!

The placeholder attribute provides textual cues for users about what to input. User friendly, eh?

<textarea placeholder="Speak your mind literati"></textarea>


Textarea row count for visible height control

Use the rows attribute to tweak the visible height:

<textarea rows="4">   /* Four lines tall, no fuss! */
</textarea>


Inline styling for quick tests or dirty fixes

Do you want a quick fix or maybe want to test something rapidly? Go inline!

<textarea style="resize: none;">  /* Bam! I won't budge! */
</textarea>


User customization overrides are important

Users might want to override styles for customization. Let !important take charge and ensure that certain styles stick around:

.textarea-on-steroids {
  resize: both !important; /* Feel the power of both ways! */
}


While at it, remember to respect user preferences and need for flexibility!