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

Question

我注意到当悬停和/或单击时我的文本区域上的调整大小按钮保持为箭头。

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

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

resize:none;

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

cursor:pointer;

但似乎应该有一个 css 参数来控制调整大小按钮的光标。我一直在四处寻找，但似乎找不到该属性(property)。我可以想出几种在 javascript 或 jquery 中执行此操作的方法，但似乎有点矫枉过正。

那么有没有办法通过 css 为文本区域的调整大小按钮设置光标？

Answer 1

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

<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>

参见 jsFiddle

一行

$(document).on('mousemove', 'textarea', function(e) { var a=$(this).offset().top+$(this).outerHeight()-16,b=$(this).offset().left+$(this).outerWidth()-16;$(this).css({cursor:e.pageY>a&&e.pageX>b?"nw-resize":""}); })