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 work

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/