Allow textarea re-size in lower-left corner

Question

Can I get the small re-size widget that appears in the lower right of text areas (on modern browsers) to appear on the lower left?

Answer 1

You can do that by setting writing direction to right-to-left. This implies that text is aligned to the right by default, but this can easily be overridden:

textarea { resize: both; direction: rtl; text-align: left; }

There are other side effects that you cannot override. The vertical scroll bar will appear on the left. The cursor will appear at the left at times (after typing in a directionally neutral character), even characters will appear on the right when typing only left-to-right characters intermixed with neutral characters – though directionally neutral characters first appear at the left (test with typing “abc (1) x” to see what I mean).

So it comes with features that are oddities when typing left-to-right text, and it’s better to look for a different approach to the original problem (whatever it was that made you want to put the resize handle in the lower left corner).

Answer 2

CSS3 adds a "resize" property that allows you to control whether the textarea is resizable. But as far as I can tell, there's no property that specifies where the handle is. If you want that level of control, you'll have to implement the widget yourself with Javascript (similar to the way the jQuery Dialog widget adds a resize handle to the DIV it creates).