カーソルを失うことなくdivをクリックしてください。CSS

Question

「CSSでdivをクリックする方法」は数多くありますが、私の状況は少し違うようです。

私は、テキストエリアのように見えるようにするために-webkit-appearanceと-moz-appearanceを使用していますが、これは一部のブラウザでは完璧ではありません...右下に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を親要素に置くことですが、私の場合は親要素が完全な文字領域であり、それはサイズ変更カーソルを持っています。このソリューションは私にとってはうまくいかないでしょう。なし：

がこのポインタイベントなしてクリックDIV作りへのシンプルかつエレガントなCSSソリューションがありますか？ 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プロパティのようなあいまいなハックはほとんどありませんでした。