Skip to main content
se añadieron 1244 caracteres en el cuerpo
Origen Enlace
user11254
user11254

Elemento Input con gráfico incluido

Este elemento Input lleva incluida una lupa como gráfico. He probado con Bootstrap varias maneras, pero siempre deja la lupa fuera del elemento input. También he pensado en añadir el gráfico como fondo del elemento, pero el problema es que cuando hago clic en el buscador, el cursor aparece encima de la lupa. ¿Hay alguna otra forma de conseguirlo?

El problema es que el buscador está dentro de una barra de navegación y no funciona correctamente, el icono se desplaza hasta el borde de la ventana, pero el input queda bien. Este es el código:

<div class="container-fluid">
  <header>
      <nav class="navbar navbar-default navbar-static-top">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
                  <span class="sr-only">Menú</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a href="index.html" class="navbar-brand">Empresa</a>
          </div>
          <form action=""  id="navbar-1" class="collapse navbar-collapse navbar-form" role="search"> 
              <div  class="inner-addon left-addon">
                    <i class="glyphicon glyphicon-search"></i>
                    <input type="text" class="form-control" placeholder="Buscar en Empresa">
              </div>
          </form>
      </nav>
  </header>

Elemento Input con gráfico incluido

Este elemento Input lleva incluida una lupa como gráfico. He probado con Bootstrap varias maneras, pero siempre deja la lupa fuera del elemento input. También he pensado en añadir el gráfico como fondo del elemento, pero el problema es que cuando hago clic en el buscador, el cursor aparece encima de la lupa. ¿Hay alguna otra forma de conseguirlo?

Elemento Input con gráfico incluido

Este elemento Input lleva incluida una lupa como gráfico. He probado con Bootstrap varias maneras, pero siempre deja la lupa fuera del elemento input. También he pensado en añadir el gráfico como fondo del elemento, pero el problema es que cuando hago clic en el buscador, el cursor aparece encima de la lupa. ¿Hay alguna otra forma de conseguirlo?

El problema es que el buscador está dentro de una barra de navegación y no funciona correctamente, el icono se desplaza hasta el borde de la ventana, pero el input queda bien. Este es el código:

<div class="container-fluid">
  <header>
      <nav class="navbar navbar-default navbar-static-top">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
                  <span class="sr-only">Menú</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a href="index.html" class="navbar-brand">Empresa</a>
          </div>
          <form action=""  id="navbar-1" class="collapse navbar-collapse navbar-form" role="search"> 
              <div  class="inner-addon left-addon">
                    <i class="glyphicon glyphicon-search"></i>
                    <input type="text" class="form-control" placeholder="Buscar en Empresa">
              </div>
          </form>
      </nav>
  </header>
Origen Enlace
user11254
user11254

¿Cómo insertar un gráfico en un elemento Input?

Elemento Input con gráfico incluido

Este elemento Input lleva incluida una lupa como gráfico. He probado con Bootstrap varias maneras, pero siempre deja la lupa fuera del elemento input. También he pensado en añadir el gráfico como fondo del elemento, pero el problema es que cuando hago clic en el buscador, el cursor aparece encima de la lupa. ¿Hay alguna otra forma de conseguirlo?