How to Change the Design of the Textarea Resize Handle in CSS

How can I change the look of resize handles?

This is a tough one. There is no way of styling this specific control. Even if you force a different appearance under webkit you still get the damn resize handle:

http://jsfiddle.net/qw73n/

You can, however, work around it and place a background image in the bottom left corner:

http://jsfiddle.net/q5kdr/

But the handler will still appear on top of it.

I'm afraid the only alternative is using jQuery UI resizable:

http://jqueryui.com/demos/resizable/

How to change cursor for resizable textarea?

This is rendered by browser itself cant be designed using css

How do I disable the resizable property of a textarea?

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

To disable it for some (but not all) textareas, there are a couple of options.

You can use class attribute in your tag(<textarea class="textarea1">):

.textarea1 {
  resize: none;
}

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 attribute (i.e., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Quote by Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/

Put textarea resize handle at the top

Update: I found a solution using jQuery UI. It's not quite straightforward, and involves a CSS hack.

Using it out of the box will not work in this case, as testable with this snippet:

$(inputField).resizable({handles: 'n'});

While this will put a draggable resize handle at the top, jQuery UI will simultaneously attempt to reposition the textarea using position: relative, in order to keep its bottom edge in place as it grows.

Because the flexbox model already keeps the textarea's bottom edge in position, this is redundant. jQuery UI will cause the whole textarea to move upward at the same rate as it is growing.

While there doesn't seem to be a way to tell jQuery to skip the repositioning, I fixed it by adding top: 0!important to the CSS.

---

Related Topics