How to make cursor pointer while pointer-events is none

Question

I have input type="text" associated with a datalist, and I want to add a fixed arrow (svg) in the input box so that when someone clicks it the datalist opens (as they clicked the box).
The problem is that the arrow I added has its default cursor-events so by default when I click it the datalist doesn't open.
I changed the cursor-events to none, the problem is solved but the cursor now is text, I want it to be pointer whenever mouse is over the arrow and text whenever mouse is over the box.
I tried the solution here: https://stackoverflow.com/a/25654479/7867670 but it didn't work for me
I tried to add an onclick event listener to the arrow and to trigger input click whenever the arrow is clicked, didn't work too.

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

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

.wrapper svg{
    pointer-events: none;
}

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

`pointer-events: none` unfortunately makes the element completely "transparent" to the pointer: the pointer can't influence the element and the element can't influence the pointer. Maybe you can do it with JS, but not with plain CSS. — FZs, Feb 24 '22 at 18:10

t.niese · Accepted Answer · 2022-02-24T19:43:44.703

As far as I know, this is not possible without JavaScript.

The arrow can only change the cursor if it has pointer-events that is not none, but then the input won't get the click.
input can't have children so that is also not an option.
All of the search results indicate that the datalist can't be opened (reliably?) with JavaScript or html only solutions.

The only thing that comes to my mind is to change the cursor programmatically:

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>

Code form other answers:

isEventInElement: Detect if a mouse event occurred inside an element's client area

do you know how can I close the datalist after clicking on the arrow while it's open? — Abdallah Barghouti, Feb 24 '22 at 21:50
@AbdallahBarghouti that depends on the browser and os. But normally something like clicking somewhere else or removing the focus. If you need full control you need to implement the visual appearance and everything else yourselfe. — t.niese, Feb 25 '22 at 07:35

score -1 · Answer 2 · answered Feb 24 '22 at 18:16

-1

You would want to set the input's cursor via css. Preferably add a css class to the input cursor-pointer and create some css for that selector.

.cursor-pointer {
    cursor: pointer !important;
}

If I'm not mistaken, it sounds like you're not expecting the user to type in the input field but rather click it like a dropdown. If that's the case I would recommend using a button to trigger the list, if possible.

answered Feb 24 '22 at 18:16

brettzenor

1
2

Whenever you have full control over css rules involved you should never use `!important`. `!important` Is most of the time wrong, you most of the time only use it if you inject components to a foreign page where you don’t know how the css rules are or might change. – t.niese Feb 24 '22 at 18:18
`If I'm not mistaken, it sounds like you're not expecting the user to type in the input field` I don't think that this assumption is true. `[…]I want it to be pointer whenever mouse is over the arrow and text whenever mouse is over the box.[…]` – t.niese Feb 24 '22 at 18:34
thanks @t.niese, you are absolutely right. regarding the `!important`, I just coppied it from my code where I'm using bootstrap, so its neccesarry in my code. here, its not. – Abdallah Barghouti Feb 24 '22 at 18:56
`just coppied it from my code where I'm using bootstrap, so its neccesarry in my code` using bootstrap does not mean that you have to use `!important` I also use bootstrap, foundation, … and as none of these use `!important` themselves there is absolutely no reason to use `!important` there. – t.niese Feb 24 '22 at 18:57

How to make cursor pointer while pointer-events is none

2 Answers2