current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1507 down vote favorite
152

I want to disable the resizable property of a textarea.

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

share|improve this question
12  
+1 good question, often wondered about this as Chrome let me resize most textareas. – Jakub Mar 8 '11 at 16:19
12  
@JDIsaacks. I disagree. That's like saying make it really easy for a user to remove custom styles from textboxes and buttons. It's my site, and it's my design. I don't want it to look like windows/mac/etc, I want it to look like MY application/site. – Paul Fleming Oct 3 '12 at 15:23
3  
@JDIsaaks - further, allowing resize in certain situations can break layout and printabilit (an important aspect of a current mission-critical project). – cale_b Nov 23 '12 at 19:35
12  
I think designers should pay more attantion to usability. Unresizable textareas are uncomfortable. Design isn't art. Art is aesthetics and thoughts. Design is aesthetics+usability. Uncomfortable design is bad design. One should think about flexability when they make web-designs. Sites are for using and reading, not watching. Think about a book where you can not turn pages because it's design is being ruined when you do. – German Mar 28 '14 at 14:09
4  
Sometimes you really do want a non-resizeable textarea. For instance, in this case, when you're (conditionally) converting a textarea into something that just looks like a label. It looks really odd to have a label with a random floating grabber way off to the side. – neminem Jan 21 '15 at 17:20

12 Answers 12

up vote 2048 down vote accepted

The following CSS rule disables resizing behavior for textarea elements:

textarea {
    resize: none;
}

To disable it for some (but not all) textareas, there are a couple of options.

To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

textarea[name=foo] {
    resize: none;
}

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#foo {
    resize: none;
}

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Quote by Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/

share|improve this answer
    
Is there a solution for Firefox, Opera and/or IE? – Šime Vidas Mar 8 '11 at 16:31
6  
@Šime IE and FF3 (and earlier) do not add support resizing, so a solution for them is not needed. For FF4, this solution should work. – Donut Mar 8 '11 at 16:37
14  
as per davidwalsh.name/textarea-resize - use resize:vertical or resize:horizontal to constrain resizing to one dimension. Or use any of max-width, max-height, min-width and min-height. – Jon Hulka Nov 17 '12 at 20:23
1  
Am I the only one who finds it weird to set this using css and not attributes? Why can't I then set disabled or checked or other properties using CSS ... – Buksy Aug 8 '16 at 13:15
2  
@Buksy Because "disabled" is a state, not a visual property. Thus it's logical that it shouldn't be decided by a styling language. – Kroltan Sep 8 '16 at 13:01
up vote 147 down vote

In CSS ...

textarea {
    resize: none;
}
share|improve this answer
up vote 70 down vote

I found 2 things

first 

textarea{resize:none}

this is a css3 which is not released yet compatable with Firefox4+ chrome and safari

another format feature is to overflow:auto to get rid of the right scrollbar taking into account dir attribute

code and different browsers

Basic html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Some browsers

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chrome

enter image description here

share|improve this answer
up vote 48 down vote

CSS3 has a new propery for UI elements that will allow you to do this. The property is the resize property. So you would add the following to your stylesheet to disable resizing of all textarea elements:

textarea { resize: none; }

This is a CSS3 property; use a compatibility chart to see browser compatibility.

Personally, I would find it very annoying to have resizing disabled on textarea elements. This is one of those situations where the designer is trying to "break" the user's client. If your design can't accommodate a larger textarea, you might want to reconsider how your design works. Any user can add textarea { resize: both !important; } to their user stylesheet to override your preference.

share|improve this answer
up vote 15 down vote 
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
share|improve this answer
up vote 15 down vote

If you need deep support you can use old school technique

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}
share|improve this answer
5  
Also use resize:none with this solution to prevent the handle appearing in the bottom corner which frustratingly doesn't work. – MacroMan Jul 17 '15 at 9:55
up vote 4 down vote

This can be do in html easy

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

This works for me. Default value is true for draggable attribute.

share|improve this answer
    
This is an HTML 5 attribute, so only newer browsers will support. I read somewhere IE supports it from 9 onwards. – Antony D'Andrea Sep 8 '15 at 15:11
    
This working in most browsers. in every latest browser. – Thusitha Nov 9 '15 at 11:04
    
it won't prevent textarea from resizing – Mishko Vladimir Dec 27 '16 at 18:14
up vote 2 down vote

Adding !important makes it work:

width:325px !important; height:120px !important; outline:none !important;

outline is just to avoid the blue outline on certain browser

share|improve this answer
1  
Don't abuse !important attribute. Meaningless to fix the width & height if CSS attribute resize: none can remove the resize feature – Raptor Apr 5 '16 at 3:44
up vote 1 down vote

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

share|improve this answer
up vote 1 down vote

GREAT QUESTION! To disable the resize property, use the following CSS property:

resize: none;

  • You can either apply this as an inline style property like so:

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

  • or in between <style>...</style> element tags like so:

    textarea {
    resize: none;
}
share|improve this answer
up vote 1 down vote

To disable resize for all textarea

textarea {
    resize: none;
}

To disable resize for a specific textarea Add an attribute name or an id and set it to something. In this case, it is named noresize

<textarea name='noresize' id='noresize'> </textarea>

CSS

/*  using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */

#noresize{
resize: none;
}
share|improve this answer
up vote 0 down vote

You can try with jQuery also

$('textarea').css("resize", "none");
share|improve this answer

protected by Josh Crozier May 11 '14 at 15:03

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.