Hiding textarea resize handle in Safari

Question

I'm using textarea components in my application, and I control their height dynamically. As the user types, the height is increased whenever there is enough text. This works fine on IE, Firefox, and Safari.

However, in Safari, there is a "handle" tool in the lower right that allows user to resize the textarea by clicking and dragging. I also noticed this issue with the textarea in the stackoverflow Ask a Question page. This tool is confusing and basically gets in the way.

So, is there anyway to hide this resize handle?

(I'm not sure if "handle" is the right word, but I cannot think of a better term.)

Answer 1

You can override the resize behaviour with CSS:

textarea
{
   resize: none;
}

or just simply

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

Valid properties are: both, horizontal, vertical, none

Answer 2

Use the following CSS rule to disable this behavior for all TextArea elements:

textarea {
    resize: none;
}

If you want to disable it for some (but not all) TextArea elements, you have a couple of options (thanks to this page).

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 (i.e., <TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

Note that this is only relevant for WebKit-based browsers (i.e., Safari and Chrome), which add the resize handle to TextArea controls.

Answer 3

the safari max-height max-width opportunity also works in firefox 4.0 (b3pre). good example here by the way: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/