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

【问题标题】：How to change cursor for resizable textarea?如何更改可调整大小的文本区域的光标？
【发布时间】：2019-08-05 10:20:46
【问题描述】：

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

请在FF和Chrome中打开this example查看区别。

这是谷歌浏览器的一个错误，我可以用我这边的 CSS 修复它吗？

更新

更新 2

该错误已在 Chrome 80 中修复。

【问题讨论】：

【解决方案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 中仍然有效）。

但不要害怕，制作自定义手柄并不难。实际上，我鼓励您使用自定义的，因为默认的太小且难以命中。尤其是触摸。实际上有很多网站使用自定义句柄（或者至少基于自动调整大小，它会根据内容增长。触摸也很棒！）。

即。 Stackoverflow 使用自定义句柄（TextAreaResizer）：

也有很多图书馆就是为了这个目的，只要做一个谷歌搜索，你就会找到适合你的东西:)

【讨论】：

感谢您的详细解答。不幸的是，自定义属性 -webkit-resizer 不再起作用。我尝试将其应用于我的示例，但没有任何变化：jsfiddle.net/yuri_beliakov/4vahwjxe/2
是的，它停止工作有点糟糕。至少能够改变它的大小、悬停状态等实际上真的很有用:)

【解决方案2】：

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

【讨论】：

是不是 Goggle Chrome 的 bug？你怎么看？
不，它不是一个错误，它是 chrome 的默认行为。例如，选择一个复选框并在 Mozilla 和 chrome 上打开它，当你检查它时，你会看到不同的设计@YuriBeliakov
我认为这是一个错误。我向 Chromium 项目报告了这个问题。