Rutarelativa

Añadir icono dentro de un Input

(0)

10 / Marzo / 2010

CSS

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.

Añadir icono dentro de un Input

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

Artículos relacionados

La Fail Whale de Twitter completamente en CSS Publicado por sergiocius el día 28/07/2010Guardado en Anotaciones reducidas
CSS: Centrar elementos en pantalla Publicado por KeLDroX el día 29/01/2010Guardado en CSS, Tips
Cargar imágenes mediante CSS Publicado por KeLDroX el día 27/01/2010Guardado en CSS, Desarrollo
Usar Google Translate con PHP y Python Publicado por sergiocius el día 28/06/2010Guardado en Desarrollo
Nuevo diseño y funcionalidades en Ruta Relativa Publicado por KeLDroX el día 31/05/2010Guardado en Rutarelativa

Sobre KeLDroX

284

Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.

Sigue a Ruta Relativa

Trackback en Añadir icono dentro de un Input

Hasta el momento el artículo Añadir icono dentro de un Input no tiene Trackbacks.

Comentarios en Añadir icono dentro de un Input

Hasta el momento el artículo Añadir icono dentro de un Input no tiene comentarios, sé el primero en comentar en él.

Escribir comentario en Añadir icono dentro de un Input

¡Tu opinión nos interesa!. Escribe tu opinión lo más clara posible para que todos podamos entenderla, evita el spam, comentarios ofensivos, etc. ya que serán eliminados. Tu opinión sera moderada antes de ser publicada, por lo que su aparición en la web puede tardar unos minutos. Si deseáis ponerse en contacto para sugerencias o críticas podéis hacerlo desde el formulario de contacto.