Question

有很多重复的＆＃34;如何用CSS点击div＆＃34;但我的情况似乎有点不同。

我使用-webkit-appearance和-moz-appearance使div看起来像文本区域，但这在某些浏览器中并不完美......右下角没有＆＃39; t在某些浏览器中显示nwse游标。我想用光标覆盖div：nwse-resize，但我也希望能够点击这个div，以便虚拟文本区域可以实际扩展。指针事件：无做它应该做的事情......然而，我失去了我的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点击而不用指针 - 事件：无？考虑到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浏览器..但是使用以前的CSS属性，没有像resize属性那样的模棱两可的黑客。

点击div而不会丢失光标css

1 个答案: