0

Hola a todos les quiero preguntar que como puedo meter una imagen (.png) dentro de un input (text), algo como el buscador de stackoverflow que tiene una imagen de un logo de busqueda, este es el codigo del formulario en mi navbar:

            <ul class="navbar-nav mr-auto">
                <li>
                    <form action="">
                        <input id="search" autocomplete="off" class="form-control" type="text" name="search">
                    </form>
                </li>
            </ul>

Quiero aclarar que estoy en laravel y por ende uso algunas clases de bootstrap aunque no se casi nada del mismo, ahora, esta es la imagen que quiero añadir tanto el codigo de la imagen como la imagen:

<img id="img-search" src="{{ asset('images/search.png') }}" alt="Search">

introducir la descripción de la imagen aquí

Este es el código css que le doy a el buscador dentro del navbar y a la imagen:

#img-search
{
    width: 35px;
    height: 36px;
}

#search
{
    margin-left: 100px;
    width: 730px;
}

Desde ya gracias :).

2
  • Simplemente usa position relative y position absolute. Te adjunto un ejemplo con tu código. De cualquier forma puedes checar las barras de busquedas que trae predefinidas bootstrap
    – Jaime
    Commented el 21 oct. 2021 a las 22:39
  • @JaimeMenéndez gracias, lo intente con la forma de bootstrap pero no lo logre adaptar a mi código, sin embargo lo intente con la forma que me pasaste usando el position relative y position absolute y ya funciono, muchas gracias :)
    – DFG
    Commented el 21 oct. 2021 a las 23:03

1 respuesta 1

4

Por lo que he podido leer utilizas bootstrap , puedes utilizar los input que te proporciona y que son bastante customizables Te pongo un ejemplo y te explico mejor :)

   <div class="input-group mb-3">
   <div class="input-group-prepend">
   <span class="input-group-text" id="basic-addon1">@</span>
   </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
   </div>

El resultado sería algo asi : introducir la descripción de la imagen aquí

Ahora bien si lo que quieres es añadir una imagen .png , solo tienes que sustituir donde pone el @ por tu etiqueta :

    <img id="img-search" src="{{ asset('images/search.png') }}" alt="Search">

Espero que te haya ayudado :)

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.