如何更改调整大小属性图标和悬停光标

Question

我想更改以下 div 右下角的调整大小图标（参见下面的代码 sn-p），我还想更改悬停时的光标（例如 e-resize 光标）

我尝试添加：

#resizableDiv::-webkit-resizer {
cursor:e-resize;
background-image: url(some_image.png);
}

但徒劳无功，我怎么能做到这一点，毕竟有可能吗？

#resizableDiv {
overflow:auto;
border:1px;
height:100px;
width:200px;
resize:horizontal;
display:inline-block;
background-color:yellow;
}

<div id="resizableDiv">
Resizable div for a single user working with Chrome
</div>

Answer 1

考虑在单独嵌套的元素中使用图标元素。
在 pseudo-element 的帮助下，您将能够实现预期的行为，如下面的代码 sn-p 所示。

代码片段演示：

#resizableDiv {
  overflow:auto;
  border:1px;
  height:100px;
  width:200px;
  resize:horizontal;
  display:inline-block;
  background-color:yellow;
  position: relative; /* required */
}

/* Additional */

div#resizableDiv:after {
    content: "";
    resize: horizontal;
    bottom: 0;
    right: 0;
    cursor: e-resize;
    position: absolute;
    z-index: 9;
    width: 20px;
    height: 20px;
}

.resizeUI {
  position: absolute;
  bottom: 0;
  right: 0;
  background: inherit;
  padding: 0px 3px;
  pointer-events: none;
  cursor: e-resize;
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="resizableDiv">
Resizable div for a single user working with Chrome
<div class="resizeUI"><i class="fa fa-arrows-h"></i></div>
</div>