Hiding textarea resize handle in Safari

safari webkit css
david.mchonechase picture david.mchonechase · Feb 25, 2009 · Viewed 50.5k times · Source

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

Tamas Czinege picture Tamas Czinege · Feb 25, 2009

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

Related questions

How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More
How can I force WebKit to redraw/repaint to propagate style changes?

I have some trivial JavaScript to effect a style change: sel = document.getElementById('my_id'); sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected'); return false; This works fine with the latest versions of FF, Opera and IE, but …

Read More
Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

I have an iframe on www.example.com that points to support.example.com (which is a CNAME to a foreign domain). I automatically resize the height of my iframe so that the frame will not need any scrollbars to …

Read More