css - 单击 div 而不会丢失光标 css

Question

“如何使用 CSS 单击一个 div”有很多重复，但我的情况似乎有点不同。

我正在使用 -webkit-appearance 和 -moz-appearance 使 div 看起来像文本区域，但这在某些浏览器中并不完美......右下角不显示 nwse 光标它在某些浏览器中确实如此。我想用光标覆盖一个 div:nwse-resize，但我也希望能够单击这个 div，以便可以实际扩展人造文本区域。 pointer-events: none 做了它应该做的事……但是，我失去了我的 nwse 光标……这就是这件事的全部意义所在。

html(GWT UiBinder):

<div class="faux-text-area">
   <div class="expando-div"/>
</div>

CSS:

.faux-text-area {
   position: relative;
   -moz-appearance: textfield-multiline;
   -webkit-appearance: textarea;
}

.expando-div { 
   position: absolute; 
   bottom: 0;
   right: 0; 
   height: 10px;
   width: 10px;
   cursor: nwse-resize;
}

添加指针事件:无理解地删除了我的光标 CSS 定义。

还有Add CSS cursor property when using "pointer-events: none"但是这个问题的公认解决方案是简单地将光标 CSS 放在父元素上，但在我的例子中......父元素是整个人造文本区域，我只希望它的一部分具有调整大小的光标。此解决方案对我不起作用。

是否有任何简单而优雅的 CSS 解决方案来使此 div 通过无 pointer-events 点击:无？考虑到 webkit-appearance 和 moz-appearance 的局限性，我感觉我被非 CSS 答案困住了，但我想我会在做更重的工作之前先询问社区。

Answer 1

替代方法(不完全是 CSS...但需要一点 JQueryUI):

我已经删除了:

-moz-appearance: textfield-multiline; 
-webkit-appearance: textarea;

我还添加了:

resize: vertical;

这使得普通的 div 显示为文本区域(至少在 Firefox 和 Chrome 中)...在 IE 中修复(回想一下我在 GWT 中开发):

private native void makeResizableInIE() /*-{
      $wnd.$("my_divs_id").resizable();
  }-*/;

对于这需要 IE hack 仍然不是很兴奋.. 但是对于以前的 CSS 属性，没有像 resize 属性那样模棱两可的 hack。