Turn off textarea resizing

html textarea
Wizard picture Wizard · Jul 9, 2012 · Viewed 192.4k times · Source

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

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

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.

Answer

feco picture feco · Jul 9, 2012

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 ):

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

Or by id (where the textarea HTML is ):

#foo {
    resize: none;
}

Taken from: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

Related questions

How to add default value for html <textarea>?

I want to set a default value for my html <textarea>. I read from a material that to add default value you have to do something like <textarea>This is default text</textarea>. I …

Read More
New line in text area

<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea> <textarea cols='60' rows='8'>This is my statement one.<br/> This …

Read More
Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Every time I develop a new form that includes a textarea I have the following dilemma when I need to specify its dimensions: Use CSS or use the textarea's attributes cols and rows? What are the pros and cons of …

Read More