Turn off textarea resizing


Html Problem Overview

I'm trying to turn off textarea resizing in my site; right now I'm using this method:

.textarea {
    min-width: 267px;
    max-width: 267px;

I know that my method is not correct and I'm searching for a better one in JavaScript. I'm a beginner, so the best solution for me will be HTML5 or jQuery.

Html Solutions

Solution 1 - Html

Try this CSS to disable resizing

The CSS to disable resizing for all textareas looks like this:

textarea {
    resize: none;

You could instead just assign it to a single textarea by name (where the textarea HTML is

Solution 2 - Html

this will do your job


enter image description here

Solution 3 - Html

CSS3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays.

For IE and iOS you can't turn off resizing but you can limit the textarea dimension by setting its width and height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

See Demo

Solution 4 - Html

Just one extra option, if you want to revert the default behaviour for all textareas in the application, you could add the following to your CSS:

textarea:not([resize="true"]) {
  resize: none !important;

And do the following to enable where you want resizing:

<textarea resize="true"></textarea>

Have in mind this solution might not work in all browsers you may want to support. You can check the list of support for resize here: http://caniuse.com/#feat=css-resize

Solution 5 - Html

This is works for me

  style="resize: none"
Some text

Solution 6 - Html

As per the question, i have listed the answers in javascript

By Selecting TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

By Selecting Id

document.getElementById('textArea').style.resize = "none";

Solution 7 - Html

It can done easy by just using html draggable attribute

<textarea name="mytextarea" draggable="false"></textarea>

Default value is true.

Solution 8 - Html

.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height

above code works on most browsers

<textarea id='textarea' draggable='false'></textarea>

do both for it to work on the maximum number of browsers


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionWizardView Question on Stackoverflow
Solution 1 - HtmlfecoView Answer on Stackoverflow
Solution 2 - HtmlRaabView Answer on Stackoverflow
Solution 3 - HtmlOriolView Answer on Stackoverflow
Solution 4 - HtmlDarlessonView Answer on Stackoverflow
Solution 5 - HtmlKordradView Answer on Stackoverflow
Solution 6 - HtmlManoView Answer on Stackoverflow
Solution 7 - HtmlThusitha WickramasingheView Answer on Stackoverflow
Solution 8 - HtmlnobodyView Answer on Stackoverflow