How To Change Cursor For Resizable Textarea?

I have an HTML element textarea with defined CSS rule { resize: both }. In FF when the user mouse over the right bottom corner of textarea the cursor changed according to value of

Solution 1:

Actually, there are, or at least were ways in which you could style the resizer and add cursor: se-resize; on hover. Check out this post: Can I style the resize grabber of textarea?

It describes how you can use ::-webkit-resizer to style the resizer:

::-webkit-resizer {
    border: 2px solid black;
    background: red;
    box-shadow: 005px5px blue;
    outline: 2px solid yellow;
}

Unfortunately it stopped working in Chrome and I couldn't anything similar. (I think it still works in Safari).

But fear not, it's not hard to make a custom handle. Actually, I would encourage you to use a custom one as the default one is too small and hard to hit. Especially with touch. There are actually a lot of sites that use custom handles (or at least automatic resizers based which grows based on the content. Works great on touch too!).

Ie. Stackoverflow uses a custom handle (TextAreaResizer):

GIF of Stackoverflows resize handle

There are also lots of libraries for exactly that purpose, just do a Google search, and you'll find something that works for you :)

Solution 2:

This is rendered by browser itself cant be designed using css