Añadir icono dentro de un Input

En el diseño de una página Web es normal encontrar formularios, ya que son los encargados de dar interactividad a nuestro usuarios, añadiendo o editando datos que posteriormente se verán reflejados en la página Web. Una forma buena para atraer a los usuarios a usar nuestros formularios es con un buen diseño, como por ejemplo personalizándolos acorde al aspecto de nuestra página Web. Añadir iconos dentro de los Input mediante CSS es una técnica bastante fácil de realizar y queda bastante profesional en un formulario.

Añadir icono dentro de un Input – Parte 1

El aspecto que intentamos conseguir es el que en cada campo del formulario contenga un icono representativo de lo que debe introducir nuestro usuario. Lo realizaremos mediante un grupo de imágenes que estarán en el interior de los campos Input en la parte izquierda. Añadiremos una separación por la parte izquierda entre el texto introducido y el icono para que el texto no quede encima del icono. Y por último añadiremos varias clases que serán las encargadas de posicionar cada icono dentro del Input.

Código HTML

<p>
    <label>Icono usuario</label>
    <input type="text" value="Introduce nombre de usuario" class="user" />
</p>
<p>
    <label>Icono Password</label>
    <input type="text" value="Introduce tu contraseña" class="password" />
</p>
<p>
    <label>Icono favorito</label>
    <input type="text" value="Introduce tu canción favorita" class="favorite" />
</p>
<p>
    <label>Icono buscar</label>
    <input type="text" value="Introduce termino de búsqueda" class="search" />
</p>
<p>
    <input type="submit" value="Insertar datos" class="submit" />
</p>

Añadir icono dentro de un Input – Parte 2

Antes de ver el código CSS que representará gráficamente los objetos en pantalla es mejor ver esta imagen que muestra lo que realmente está ocurriendo con las reglas CSS.

Código CSS

input
{
    background: url("iconos.gif") no-repeat scroll 0 0 transparent;
    border: 1px solid #BFBFBF;
    color: #BFBFBF;
    padding: 5px 5px 5px 25px;
    width: 230px;
}

input.submit
{
    width: auto;
    background-position: 4px -91px;
    background-color: #999999;
    color: #FFFFFF;
    cursor: pointer;
}

input.user{ background-position: 4px -21px; }
input.search{ background-position: 4px 4px; }
input.password{ background-position: 4px -46px; }
input.favorite{ background-position: 4px -70px; }

Con estas sencillas reglas CSS podremos añadir iconos dentro de los campos Input de un formulario quedando un poco más acorde a nuestro diseño. Tan sólo necesitamos añadir más imágenes e ir aplicándole clases para las distintas posiciones en la que se encontrará el icono.

Demo: Ir a la demo añadir icono dentro de Input
Descarga: Descargar añadir icono dentro de Input
Iconos: Tutorial9

Share