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 property resize, but in Chrome cursor doesn't change.

Please open this example in FF and Chrome to check the difference.

Is it a bug of Google Chrome and can I fix it with CSS on my side?

Update

I reported bug to Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=942017

Update 2

The bug was fixed in Chrome 80.

回答1:

This is rendered by browser itself cant be designed using css

回答2:

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: 0 0 5px 5px 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 :)

来源：https://stackoverflow.com/questions/55163929/how-to-change-cursor-for-resizable-textarea

标签

html