CSS pointer-events fails in Microsoft Edge

Question

There is a drop-down in my web application. This drop-down is user-defined (not using the <select> element). Inside this drop-down there is a down arrow. This arrow is creating by using background images on an absolutely positioned span. This span tag is blocking the click event of the drop-down. So, I've added pointer-events:none to the span tag. After adding this, it's working fine everywhere but in the Edge browser. Does Edge support pointer-event: none? If not, what is the alternative for pointer-event: none in Edge.

Below is the code which I used:

<div class="multi-dd" id="multi_dd_ddlProfession" role="application" cascadesto="ddlDiscipline">
    <input class="multi-dd-txt" id="txtProf" role="combobox" aria-readonly="false" aria-describedby="spMultiExit" style="width: 260px;" aria-label="Multi Select Control Professions " type="text" readonly="readonly" value="Select All">
    <span class="nir"></span>
</div>

.nir{
    height: 28px; 
    margin-left: -30px;
    vertical-align: bottom;
    overflow: hidden;
    pointer-events: none;
}

Can you link to, or provide in your post, a working demo of the issue? — Sampson, Jul 28 '16 at 21:58

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

There are some bugs which may be the root cause:

FocusEvent Sequence should be: focusout, focusin, blur, focus.

FocusEvent Sequence is: blur, focusout, focus, focusin.

and a no-repro test:

#testID {pointer-events: none;}

<ul>
  <li><a href="https://developer.microsoft.com">MS Dev</a></li>
  <li id="testID"><a href="http://example.com">example.com</a></li>
</ul>

The first version of Microsoft Edge was introduced in Windows 10 Build 10049. Pointer Events have been supported since Windows 10 Build 10240.

References

CSS pointer-events fails in Microsoft Edge

1 Answers1