8

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>

2

2 respuestas 2

8

Te dejo un par de ejemplos, un input con glyphicons y otro sin:

Con bootstrap 3.x

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="glyphicon glyphicon-search"></i>
    </span>
</div>

<div class="form-group">
  <label class="control-label" for="email">
Email
  </label>
  <div class="input-group">
<div class="input-group-addon">
  @
</div>
<input class="form-control" id="email" name="email" type="text"/>
  </div>
</div>

Icono dentro del Input

.inner-addon {
  position: relative;
}
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.left-addon .glyphicon {
  left: 0px;
}
.right-addon .glyphicon {
  right: 0px;
}
.left-addon input {
  padding-left: 30px;
}
.right-addon input {
  padding-right: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="inner-addon left-addon">
  <i class="glyphicon glyphicon-user"></i>
  <input type="text" class="form-control" placeholder="Usuario" />
</div>

<div class="inner-addon right-addon">
  <i class="glyphicon glyphicon-search"></i>
  <input type="text" class="form-control" placeholder="Buscar" />
</div>

Bootstrap 2.x

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />



<div class="input-append">
  <input class="span2" type="text">
  <button type="submit" class="btn">
    <i class="icon-search"></i>
  </button>
</div>


Información adicional:

Para saber como se llaman los glyphicons te vas a la página de bootstrap

Ayuda para bootstrap3 en español

Nota: estos ejemplos funcionan también si utilizas Font Awesome

6
  • Gracias por vuestras respuestas, pero el problema es que tengo el buscador dentro de una barra de navegación, y no me funciona correctamente. Este es el código:
    – user11254
    Commented el 5 oct. 2016 a las 19:19
  • Lo siento pero no puedo poner el código, he dejado 4 espacios e incluso 8 como dice la ayuda, pero o bn no me funciona, o bn lo hago mal. Esto me resulta bastante complicado, cada vez q intento poner código en algún post, creo que deberían hacer algo más práctico. ¿Existe algún video-tutorial en Youtube que explique cómo hacerlo?
    – user11254
    Commented el 5 oct. 2016 a las 19:26
  • Tienes que editar la pregunta original para poner el código: te fijate debajo de lo que escribiste originalmente, por las dudas te dejo el link es.stackoverflow.com/posts/26124/edit
    – Alan
    Commented el 5 oct. 2016 a las 19:39
  • También te invito a que hagas el Tour, te ayudará a entender mucho como funciona la comunidad! es.stackoverflow.com/tour
    – Alan
    Commented el 5 oct. 2016 a las 19:41
  • 1
    El Tour ya lo vi hace tiempo, pero no sabía que para incluir código hay que hacerlo desde la pregunta original. Voy a intentarlo.
    – user11254
    Commented el 5 oct. 2016 a las 20:05
4

Ya te dieron una respuesta con Bootstrap. Aquí una alternativa con CSS3 (flexbox):

@import "https://fonts.googleapis.com/css?family=Lato:400,700";
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 1rem;
}

#search-wrapper {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-flow: row-reverse nowrap;
      -ms-flex-flow: row-reverse nowrap;
          flex-flow: row-reverse nowrap;
  width: 350px;
}
#search-wrapper #search {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-left: 0;
  border-radius: 0 25px 25px 0;
  color: #444;
  padding: .6rem .5rem;
  font-family: 'Lato';
  font-size: 15px;
  font-weight: lighter;
  -webkit-transition: border-color .2s ease;
  transition: border-color .2s ease;
  width: 100%;
}
#search-wrapper #search + i {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 25px 0 0 25px;
  border-right: 0;
  color: #777;
  padding: .67rem .65rem;
  -webkit-transition: border-color .2s ease;
  transition: border-color .2s ease;
}
#search-wrapper #search:focus {
  border-color: #999;
  outline: none;
}
#search-wrapper #search:focus + i {
  border-color: #999;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div id="search-wrapper">
  <input 
         type="search" 
         id="search" 
         placeholder="Buscar"
   />
  <i class="fa fa-search"></i>
</div>

Tu Respuesta

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