CODEWITHSUNDEEP
htmlcssuser-controlstextarea
Joeytje50
Joeytje50

Reputation: 19112

How to reposition the resize indicator in a textarea

I'd like to make a textarea float to the right, but that would show the resize:both; style that's default to textareas on the right side, while the resizing itself would expand the textarea to the left.

The HTML I'm using is simply:

<textarea style="float:right;"></textarea>

but it is much clearer to see what I mean by viewing this demo. As you can see, resizing the textarea will require you to drag to the right, while it will expand to the left. Is there a way for me to reposition the little indicator in the corner of the textarea to the left side?

Upvotes: 0

Views: 835

Answers (1)

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

As far as I know, that is not a feature that is exposed by the browsers at this time. It's a relatively new feature to HTML, as it is, and I don't think there are any semantic or programmatic hooks to that UI piece of textareas yet.

Your best bet, at this point then will be to fake it with drag-and-drop JS and pseudo-controls, and hide the native resize.

Actually, I stand (somewhat) corrected. According to a comment in this article (http://davidwalsh.name/textarea-resize), you can play around with the resize widget, but only in Safari at the time of that comment:

Greg March 11, 2013

In webkit you can play around with the scrollbar styling. I used > ::-webkit-resizer{background-color:transparent;} ::-webkit-scrollbar-corner{background-color:rgba(0,0,0,0.2);}

to style the resizer on the textareas in one of my sites.

(Easier to read in the comments section there.)

Upvotes: 1

Related Questions