用于更改textarea上调整大小按钮的光标样式的CSS

Question

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

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

看到有css要删除或添加调整大小工具到textarea,

resize:none;

和css来改变整个textarea的光标,

cursor:pointer;

但似乎应该有一个css参数来控制调整大小按钮的光标.我一直在四处寻找,但似乎无法找到房产.我可以想一些在javascript或jquery中执行此操作的方法,但看起来有点矫枉过正.

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

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":""}); })

Answer 2

这是由浏览器本身呈现的,不是HTML的一部分,因此无法通过CSS设置样式.

Answer 3

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

#block{
  display: block;
  width:150px;
  height:100px;
  border: solid black 1px;
  background: red;
}

.resizable{
  resize: both;
  overflow:auto;
  position:relative;
}

.resizable:after{
  content:"";
  position: absolute;
  bottom: 0;
  right:0;
  display:block;
  width:8px;
  height:8px;
  cursor: nwse-resize;
  background-color: rgba(255,255,255,0.5)
}

<div id="block" class="resizable"></div>

（我将半透明的白色背景颜色添加到 :after 伪元素中，以便您可以看到它的位置和大小，但您可以使其不可见）