时间戳

首页 > 解决方案 > 如何更改可调整大小的文本区域的光标？

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

问题描述

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

请在 FF 和 Chrome 中打开此示例以检查差异。

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

更新

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

更新 2

该错误已在 Chrome 80 中修复。

标签： htmlcssgoogle-chromecursortextarea

解决方案

实际上，有，或者至少有一些方法可以设置调整大小并添加cursor: se-resize;悬停。查看这篇文章：我可以设置 textarea 的调整大小抓取器的样式吗？

它描述了如何使用::-webkit-resizer调整大小来设置样式：

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

不幸的是，它停止在 Chrome 中工作，我也没有类似的东西。（我认为它仍然适用于 Safari）。

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

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

Stackoverflows 调整大小句柄的 GIF

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

推荐阅读