html - How do I disable the resizable property of a textarea?

ID : 193

viewed : 135

Tags : htmlcsshtml

Top 5 Answer for html - How do I disable the resizable property of a textarea?

vote vote

99

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.

You can use class attribute in your tag(<textarea class="textarea1">):

.textarea1 {   resize: none; } 

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 Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

vote vote

84

In CSS ...

textarea {     resize: none; } 
vote vote

78

I found two things:

First

textarea{resize: none} 

This is a CSS 3, which is not released yet, compatible with Firefox 4 (and later), Chrome, and Safari.

Another format feature is to overflow: auto to get rid of the right scrollbar, taking into account the 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

  • Internet Explorer 8

Enter image description here

  • Firefox 17.0.1

Enter image description here

  • Chrome

Enter image description here

vote vote

65

CSS 3 has a new property 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 CSS 3 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.

vote vote

51

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea> 

Top 3 video Explaining html - How do I disable the resizable property of a textarea?

Related QUESTION?