How to disable textarea resizing?

html

textarea

css

responsive

byNikita Barsukov·Aug 10, 2024

To swiftly disable textarea resizing using CSS, include the resize: none; property in your <textarea> style:

textarea { resize: none; }

This method acts as a 🔐 lock to prevent users from performing any rescaling, maintaining a clean and uniform layout on your webpage.

Resizing control

But who said it's always all or nothing? Feel free to set the resize capability for one axis only, by using resize: vertical; or resize: horizontal;:

/* "I ONLY LOOK UP!" - Textarea */
textarea { resize: vertical; }

/* "SOLUTION? SIDEWAYS!" - Textarea */
textarea { resize: horizontal; }

Setting resize boundaries

Want to let users stretch, but only so far? Control the resizing borders with max-height, max-width, min-height, and min-width to define these boundaries:

/* "OK, YOU CAN STRETCH... BUT JUST THIS MUCH" */
textarea {
  resize: vertical;
  max-height: 300px;
  min-height: 100px;
}

Efficient styling

To ensure these styles are applied across your site, include the CSS rules within your page's stylesheet. Remember, inline styles are like tattoos, they can be quite hard to get rid of:

/* "I'M NOT LIKE OTHER TEXTAREAS" */
textarea.no-resize {
  resize: none;
}

Use the !important rule sparingly to enforce your styles, like a boss:

/* "I SAID, NO RESIZE! WHAT PART OF NO DON'T YOU UNDERSTAND?
   NONE, THAT'S RIGHT, WALK AWAY" */
textarea {
  resize: none !important;
}

Overflowing content

Disable resizing but not the content! For times when the content exceeds the text box area, use overflow: auto; to handle it:

/* "OH, YOU'RE STILL WRITING? DON'T WORRY, I GOT SCROLLS FOR THAT" */
textarea {
  resize: none;
  overflow: auto;
}

Ensuring fit within layout

You might want your textarea to neatly fit within the parent container. Achieve this by setting width: 100%;:

/* GOLDILOCKS SYNDROME: THIS TEXTAREA IS JUST RIGHT! */
textarea {
  width: 100%;
  resize: none;
}

Cross-browser compatibility

While the resize property is adapting well in most modern browsers, do test your designs to ensure the user experience is consistent across different platforms.