CSS更改文本区域上调整大小按钮的光标样式

我注意到，当鼠标悬停和/或单击时，文本区域上的“调整大小”按钮保持箭头状态

在我看来，它应该是一个指针

考虑到有css可以删除或添加调整大小工具到文本区域

resize:none;

cursor:pointer;

和css来更改整个文本区域的光标

resize:none;

cursor:pointer;

但似乎应该有一个css参数来控制只调整大小按钮的光标。我四处找了一下，但似乎找不到房子。我可以想出一些在javascript或jquery中实现这一点的方法，但似乎有些过头了

---

那么，有没有一种方法可以通过css为文本区域的“调整大小”按钮设置光标？

这是由浏览器本身呈现的，不是HTML的一部分，因此它不能通过css设置样式。

这是一种浏览器功能。。。没有适合的款式。有些浏览器甚至不在文本区域显示重新调整大小的角。可悲的是，这一点可能无法改变

有一个简单的方法来处理这个问题

<script type="text/javascript">
    $(function() {
        $(document).on('mousemove', 'textarea', function(e) {
            var a = $(this).offset().top + $(this).outerHeight() - 16,  //  top border of bottom-right-corner-box area
                b = $(this).offset().left + $(this).outerWidth() - 16;  //  left border of bottom-right-corner-box area
            $(this).css({
                cursor: e.pageY > a && e.pageX > b ? 'nw-resize' : ''
            });
        })
    });
</script>

---

您可以在元素的“：after”伪元素上使用CSS的cursor属性：

#块{
显示：块；
宽度：150px；
高度：100px；
边框：纯黑1px；
背景：红色；
}
.可调整大小{
调整大小：两者；
溢出：自动；
位置：相对位置；
}
.可调整大小：在{
内容：“；
位置：绝对位置；
底部：0；
右：0；
显示：块；
宽度：8px；
高度：8px；
光标：nwse调整大小；
背景色：rgba（255255,0.5）
}

---

看起来像是一个javascript解决方案。请参阅我的答案，了解更简单的jQuery解决方案。这在Chrome中起到了作用，将其添加到样式表fyvery nice中。如果有一个css解决方案，我会更喜欢它，但这非常有效，谢谢。是的，我想要简单的css或浏览器已经做了，但到目前为止，这是不可能的。上面的脚本只处理右下角（调整大小区域），但可用于在屏幕上随时随地应用鼠标更改textarea@SpYk3HH您可能想删除myPos.bottom>e.pageY和myPos.right>e.pageX，因为您正在将事件附加到textarea（光标样式仅在内部有效）@SpYk3HH如何？我只是说代码会更快避免这两个操作。在事件处理程序检查鼠标是否超出移除光标的区域之前，鼠标将离开容器。JSFIDLE在OS X上的Chrome中不起作用。但在Firefox中起作用。如何调整此代码以使用textarea元素？