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

Question

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

请打开this example在 FF 和 Chrome 中检查差异。

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

更新

我向 Chromium 报告了错误: https://bugs.chromium.org/p/chromium/issues/detail?id=942017

更新 2

该错误已在 Chrome 80 中修复。

Answer 1

实际上，有一些方法，或者至少有一些方法可以设置调整器的样式并在悬停时添加 cursor: se-resize;。查看这篇文章: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 中仍然有效)。

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

即。 Stackoverflow 使用自定义句柄 (TextAreaResizer):

GIF of Stackoverflows resize handle

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