'How to make cursor pointer while pointer-events is none

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


Solution 1:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 brettzenor

Related Questions