[Aporte] Añadir icono dentro de un Input

Usuario Novato

#102/Dic/2011, 09:06

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.

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.

Nota: La imagen a usar esta en modo sprite.

Código Html

Spoiler:

<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="pas sword" />
</p>
<p>
    <label>Icono favorito</label>
    <input type="text" value="Introduce tu canción favorita" cla ss="favorite" />
</p>
<p>
    <label>Icono buscar</label>
    <input type="text" value="Introduce termino de búsqueda" cla ss="search" />
</p>
<p>
    <input type="submit" value="Insertar datos" class="submit" />
</p>

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

Spoiler:

input
{
    background: url("iconos.gif") no-repeat scroll 0 0 transparen t;
    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
Fuente: Ruta Relativa

Suerte xD

Anterior Siguiente Arriba

Responder

ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual

Inicio

Servicio Hosting

PHP

Opciones:

Ir al subforo:

Permisos:

TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes

Temas similares

No se han encontrado temas similares