CODEWITHSUNDEEP
csssafariresizewebkittextarea
david.mchonechase
david.mchonechase

Reputation: 2279

Hiding textarea resize handle in Safari

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

Upvotes: 118

Views: 69970

Answers (3)

Tamas Czinege
Tamas Czinege

Reputation: 121294

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

Upvotes: 215

GIPSSTAR
GIPSSTAR

Reputation: 2100

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.

Upvotes: 4

fortrabbit-frank
fortrabbit-frank

Reputation: 1

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/

Upvotes: -1

Related Questions