Tengo input type="text" asociado con una datalist de datos, y quiero agregar una flecha fija (svg) en el cuadro de entrada para que cuando alguien haga clic en él, se abra la lista de datos (cuando hicieron clic en el cuadro).
El problema es que la flecha que agregué tiene sus cursor-events predeterminados, por lo que, de manera predeterminada, cuando hago clic en ella, la lista de datos no se abre.
Cambié los cursor-events a none , el problema se resolvió pero el cursor ahora es text , quiero que sea un pointer cada vez que el mouse esté sobre la flecha y text cada vez que el mouse esté sobre el cuadro.
Probé la solución aquí: https://stackoverflow.com/a/25654479/7867670 pero no me funcionó
Intenté agregar un detector de eventos onclick a la flecha y activar el clic de input cada vez que se hace clic en la flecha, tampoco funcionó.
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>Hasta donde yo sé, esto no es posible sin JavaScript.
La flecha solo puede cambiar el cursor si tiene pointer-events que no son none , pero luego la input no obtendrá el clic.
input no puede tener hijos, por lo que tampoco es una opción.
Todos los resultados de la búsqueda indican que la datalist de datos no se puede abrir (¿confiablemente?) con soluciones solo de JavaScript o html.
Lo único que se me ocurre es cambiar el cursor mediante programación:
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>Código de otras respuestas:
Le gustaría configurar el cursor de la entrada a través de css. Preferiblemente, agregue una clase css al cursor-pointer entrada y cree algo de css para ese selector.
.cursor-pointer { cursor: pointer !important; }Si no me equivoco, parece que no espera que el usuario escriba en el campo de entrada, sino que haga clic en él como un menú desplegable. Si ese es el caso, recomendaría usar un botón para activar la lista, si es posible.