Ícono dentro de un input usando HTML y CSS

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 />.

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 search input by Roel Magdaleno (@roelmagdaleno) on CodePen.

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>

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.

Roel Magdaleno
Escrito por Roel Magdaleno

Roel Magdaleno es un ingeniero informático especializado en desarrollo web desde hace más de 5 años. Desarrolla sitios web, aplicaciones web, plugins para WordPress y scripts con PHP y JavaScript. Además, comparte su conocimiento en su blog personal.

Deja un comentario