如何更改可调整大小的文本区域的光标？

Question

我有一个 HTML 元素 textarea，其中定义了 CSS 规则 { resize: both }。在 FF 中，当用户将鼠标悬停在 textarea 的右下角时，光标会根据属性 resize 的值发生变化，但在 Chrome 中，光标不会发生变化。

请用FF打开this example和Chrome查看区别

这是 Google Chrome 的错误吗，我可以用 CSS 修复它吗？

更新

更新 2

该错误已在 Chrome 80 中修复。

Answer 1

这是浏览器本身渲染的，不能用css

设计

Answer 2

实际上，有一些方法，或者至少有一些方法可以设置缩放器的样式并在悬停时添加 cursor: se-resize;。看看这个 post：Can I style the resize grabber of textarea?

它描述了如何使用 ::-webkit-resizer 来设置缩放器的样式：

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

不幸的是，它在 Chrome 中停止工作，我无法进行任何类似的操作。（我认为它在 Safari 中仍然有效）。

不过不用担心，定制手柄并不难。实际上，我鼓励您使用自定义的，因为默认的太小且难以击中。尤其是触摸。实际上有很多网站使用自定义句柄（或者至少是基于内容增长的自动调整器。触摸时效果也很好！）。

即。 Whosebug 使用自定义句柄 (TextAreaResizer)：

GIF of Whosebugs resize handle

还有很多库正是用于此目的，只需进行 Google 搜索，您就会找到适合您的内容:)

How to change cursor for resizable textarea?