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

Posted 2023-05-07

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

【英文标题】：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 修复它吗？

更新

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

更新 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 中仍然有效）。

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

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

GIF of ***s resize handle

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

【讨论】：

感谢您的详细解答。不幸的是，自定义属性 -webkit-resizer 不再起作用。我尝试将其应用于我的示例，但没有任何变化：jsfiddle.net/yuri_beliakov/4vahwjxe/2

是的，它停止工作有点糟糕。至少能够改变它的大小、悬停状态等实际上真的很有用:)

【参考方案2】：

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

【讨论】：

是不是 Goggle Chrome 的 bug？你怎么看？

不，它不是一个错误，它是 chrome 的默认行为。例如，选择一个复选框并在 Mozilla 和 chrome 上打开它，当你检查它时，你会看到不同的设计@YuriBeliakov

我认为这是一个错误。我向 Chromium 项目报告了这个问题。