Add CSS Cursor Property When Using "Pointer-Events: None"

function isEventInElement(event, element) {
  var rect = element.getBoundingClientRect();
  var x = event.clientX;
  if (x < rect.left || x >= rect.right) return false;
  var y = event.clientY;
  if (y < rect.top || y >= rect.bottom) return false;
  return true;
}

const inputElement = document.querySelector('[name="inp"]')
const inputElementArrow = document.querySelector('.wrapper')

inputElement.addEventListener('mousemove', (evt) => {
  if (isEventInElement(evt, inputElementArrow)) {
    inputElement.style.cursor = 'pointer'
  } else {
    inputElement.style.cursor = null;
  }
})

input::-webkit-calendar-picker-indicator {
  display: none !important;
}

.wrapper {
  position: relative;
  display: inline;
  left: -25px;
  pointer-events: none;
}

.wrapper svg {}

<input type="text" list="mylist" name="inp" />
<div class="wrapper" onclick="getElementsByName('inp')[0].click();">
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
        <path fill="currentColor" d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" />
    </svg>
</div>
<datalist id="mylist">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</datalist>

Difference between pointer-events and cursor

The pointer-events property gives control over how an element can respond to touch or click events, while the cursor property just controls what the cursor should look like in that event.

i.e. cursor: pointer will show a pointer finger when you hover over the element... cursor: disabled will show a cross sign showing the element might be disabled.

pointer-events: none on the other hand, will make the element completely unresponsive to a hover or click.

CSS-tricks has a write up here: https://css-tricks.com/almanac/properties/p/pointer-events/

Is setting `pointer-events: none;` on header elements an accsssibility issue?

pointer-events: none prevent events from emitting. This could cause an issue if you want to make use of those at a later point. If you ever want to listen to an event emitted in your JavaScript code you will be in the somewhat curious situation of them being blocked by your css. So I wouldn't recommend using it without a very good reason.

pointer-events: none will disallow events on the child elements. So if there is e.g. a link inside the header end-users will not be able to interact with that link. That would be an accessibility issue.

So there are no accessibility issues using pointer-events: none as long as end users won't expect anything to happen when they interact with the element or its descendants.

PS: Since you mentioned it in the comments: disallowing users to select text is an accessibility issue/restriction by itself.

CSS color property doesn't work when used along side with pointer-events property in Safari OSX and iOS, whenever DOM gets updated

we just wasted a bit of time till we found this question, apparently, this is true we had problems with Vue.js and the DOM not being updated properly when we wanted to disable the button.

Our final solution was to add the :disabled="$props.disabled" to the component plus adding a class as well (you should evaluate to use proper html syntax instead of a div use a proper button), you can do that with plain JS or Jquery as well and then style it

  &--disabled {
    color: $color-button-disable;

    &:hover {
      background-color: unset;
      cursor: unset;
    }
  }

the final result it's the same and it works in all browsers.

pointer-events:none prevents title attribute

No, pointer-events: none is pretty encompassing in that any eventType that is associated with the mouse. You could wrap a <span> around the anchor and assign the title to that instead. It's ugly but valid.

Demo

a {
  pointer-events: none;
}

<span title='I am wrapped around this anchor'>
<a href="https://stackoverflow.com/" title="Some Sample Title">Sample Link</a>
</span>