click through div without losing cursor css

Question

There are numerous duplicates of "how to click through a div with CSS" but my situation seems to be a little different.

I'm using -webkit-appearance and -moz-appearance to make a div look like a text area, but this isn't perfect in some browsers... the bottom right corner doesn't show the nwse cursor like it does in some browsers. I want to overlay a div with cursor: nwse-resize, but I also want to be able to click through this div so that the faux text area can actually expand. pointer-events: none does what it is supposed to do... however, I lose my nwse cursor.. which was the entire point of this.

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;
}

Adding pointer-events: none understandably removes my cursor CSS definition.

There is also Add CSS cursor property when using "pointer-events: none" but the accepted solution to this question is to simply put the cursor CSS on the parent element, but in my case... the parent element is the entire faux text area and I want only a portion of it to have a resize cursor. This solution will not work for me.

Are there any simple and elegant CSS solutions to making this div click through without pointer-events: none? I have a feeling I am stuck with a non CSS answer, given the limitations of webkit-appearance and moz-appearance, but I figured I'd ask the community first before doing heavier lifting.

score 0 · Accepted Answer · answered May 02 '17 at 20:29

Alternative approach (Not quite CSS only... but with a little JQueryUI needed):

I've removed:

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

And I've added:

resize: vertical;

Which makes the plain div appear as a text area (at least in Firefox and Chrome)... to fix in IE (recall I am developing in GWT):

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

Still not super thrilled that this requires an IE hack.. but with the previous CSS properties, there wasn't much of an equivocal hack like there is with the resize property.

click through div without losing cursor css

1 Answers1