csssafariresizewebkittextarea

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

Solution

  • 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