Snippet

Ícono dentro de un input usando HTML y CSS

.input-wrapper {
position: relative;
width: 271px;
}
 
.input {
box-sizing: border-box;
color: #191919;
padding: 15px 15px 15px 35px;
width: 100%;
}
 
.input.password {
padding: 15px 35px 15px 15px;
}
 
.input-icon {
color: #191919;
position: absolute;
width: 20px;
height: 20px;
left: 12px;
top: 50%;
transform: translateY(-50%);
}
 
.input-icon.password {
left: unset;
right: 12px;
}

Demo

En el siguiente demo, incluyo dos <input />, el primero es un buscador y el otro es un campo para ingresar una contraseña.

See the Pen SVG icon inside HTML input by Roel Magdaleno (@roelmagdaleno) on CodePen.

Contexto

Tal vez necesitas insertar un ícono dentro de un <input /> de HTML cuando estás diseñando tu sitio web. ¿Por qué necesitarías un ícono?

Un ícono provee más contexto sobre la acción a ejecutar del usuario, por ejemplo, inputs de:

  • Buscadores.
  • Contraseñas.

Para un <input /> de buscador, es común agregar un ícono de lupa, que simule la acción de buscar.

Y para las contraseñas, se agrega un ícono de un ojo abierto y cerrado para mostrar y esconder la contraseña escrita en el <input />.

Explicación

Para tener un ícono dentro del <input />, es necesario tener un contenedor, el <input /> y el ícono:

<div class="input-wrapper">
<input type="search" class="input" placeholder="Search" />
 
<svg
xmlns="http://www.w3.org/2000/svg"
class="input-icon"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"
/>
</svg>
</div>

La clase CSS .input-wrapper debe tener una position relativa:

.input-wrapper {
position: relative;
width: 271px;
}

La posición relativa nos ayuda a que nuestro ícono (input-icon) se acople, únicamente, a la anchura y altura de su padre (input-wrapper).

Entonces, a nuestro <input /> le puedes aplicar cualquier estilo CSS pero el ícono deberá tener una posición absoluta, entre otros estilos como color y tamaño:

.input-icon {
color: #191919;
position: absolute;
width: 20px;
height: 20px;
left: 12px;
top: 50%;
transform: translateY(-50%);
}

¿Notas las propiedades top y transform? Estas son el truco para hacer que el ícono quede centrado en el <input />.

La propiedad top con su valor 50%. Este define la posición de arriba de nuestro ícono. En este caso, como su valor es 50%, el ícono se hará hacia “abajo”; digamos que su punto inicial es el borde de nuestro wrapper (el cual contiene una posición relativa).

Ícono dentro de <input /> con la propiedad CSS top.
Ícono dentro de <input /> con la propiedad CSS top.

Si hubieses definido un -50%, el ícono estaría muy arriba de nuestro wrapper.

Lo anterior no hará que el ícono se vaya directo a la mitad, en cambio, se moverá casi hasta abajo del elemento. Ahora, debe trabajar en conjunto con la propiedad transform.

La propiedad transform hará que el elemento sea modificado en sus coordenadas, y su valor translateY(-50%) indica que moverá el elemento en el eje Y en un 50% menos.

El valor a poner dentro de translateY es igual al valor de top pero en negativo.

Es decir, de los 50% que moviste con la propiedad top, hay que mover su eje Y un -50%. Y así, el ícono queda centrado en el <input />.

Ícono dentro de <input /> con la propiedad CSS top y transform.
Ícono dentro de <input /> con la propiedad CSS top y transform.

5

Comentarios

5 respuestas a “Ícono dentro de un input usando HTML y CSS”

  1. Avatar de Patricia Behr
    Patricia Behr

    Gracias Roel!! Soy estudiante de Full Stack Developer. Me sirvió muchísimo este artículo. Claramente detallado y explicado. Lo guardé y usaré muy prontamente !!

    1. Avatar de Roel Magdaleno

      Gracias por tu comentario Patricia! Sigue estudiando este maravilloso mundo del developer 🙂

  2. Avatar de Roberto Félix
    Roberto Félix

    Excelente aporte, me ayudó en mi proyecto.
    Gracias!

  3. Avatar de Wilmer Ochoa
    Wilmer Ochoa

    buenas como puedo hacer ya que mi icono queda cubierto por el input no se ve

    1. Avatar de Roel Magdaleno

      Buen día Wilmer, ¿tienes algún enlace dónde probar tu código? Puedes subirlo a un Codepen. Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *