0

tengo una pequeña duda, resulta que estoy realizando un sistema, y dentro del mismo hay un input de búsqueda junto con un con el icono de una lupa, lo que quisiera es que el icono este siempre sobre el input aunque este tenga que moverse porque aparezcan mas opciones arriba (las opciones se generan con un for asi que pueden haber mas o menos).

html

 <input type="search" id="buscar" name="buscar"  />
 <i class="fa fa-search busca" id="lupa"></i>

js

var busqueda = document.getElementById("buscar");
var lupa = document.getElementById("lupa");
lupa.style.left = (parseInt(busqueda.offsetLeft)+39.5)+"%";
lupa.style.top = (parseInt(busqueda.offsetTop)+9)+"%";

1 respuesta 1

0

Podrías hacer esto:

i {
position: absolute;
right: 0;
top: 0;
}

Y asumiendo que tu input y tu icono están dentro de un contenedor, a ese contenedor le tienes que añadir en el css el parámetro de position: relative.

De esta manera, solo con css, tendrías el icono encima del input siempre.

2
  • gracias, quien diria que era tan sencillo y yo pensando en soluciones complejas Commented el 20 jun. 2022 a las 17:06
  • No hay de que! Suerte en tu sistema. Commented el 20 jun. 2022 a las 17:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.