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

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

<input />
con la propiedad CSS top y transform.
Deja un comentario