Rutarelativa

Publicidad

Anotaciones reducidas

  • La vida en un día: Película de un día en la Tierra La vida en un día: Película de un día en la Tierra

    La vida en un día -Life in a day- es una película hecha por los propios usuarios de Youtube, que durante el día 24 de Julio del 2010 grabaron las cosas que pasaban en su vida durante ese día, y el director Kevin McDonald ha reunido en forma de película de un día en la Tierra.

    De una hora y media de duración, veremos todo tipo de escenas en todas las partes del mundo, con una emotiva visión del mundo real tanto con sus cosas bellas y buenas, como con la más cruda visión del ser humano y su realidad.

    [La vida en un día: Película de un día en la Tierra]

  • Video: Las posibilidades de Kinect Video: Las posibilidades de Kinect

    Cuando oímos hablar de Kinect, no podemos evitar pensar en un "simple" aparato de detección de movimientos para videojuegos, y en cierto modo es así.

    Lo bueno es que Microsoft ha lanzado una SDK de Kinect para que los usuarios puedan crear aplicaciones que exploten las capacidades del dispositivo, dando lugar a miles de ideas.

    El siguiente video es al fin y al cabo con fines publicitarios, pero nos da que pensar acerca de las aún sin explotar posibilidades de Kinect. Disfrutadlo.

    [Video: Las posibilidades de Kinect]

  • La historia de los Exploradores Web La historia de los Exploradores Web

    Desde prácticamente los comienzos de Internet los Exploradores Web o Navegadores web nos han acompañado, haciendo las veces de herramientas indispensables para una navegación que a cada año que pasa se hace más cómoda y más intuitiva.

    En Testking encuentro una imágen que contiene un gran esquema de la historia de los Exploradores Web desde el primer Nescape en 1994 hasta los navegadores modernos de este año 2011.

    Una imágen interesante para conocer cuál ha sido la evolución en éste área.

    [La historia de los Exploradores Web]

Últimos comentarios

  • Avatar del usuario Alberto Alberto Hola Sergio, Excelente tu post, llegué a ti debido que quiero...
  • Avatar del usuario aiko aiko Hola, yo uso esta calculadora saber cuánto para enviar y recibir:...
  • Avatar del usuario Samir Jalabe Samir Jalabe Buenas quien me ayuda hacer un rombo en Php por favor de antemano...
  • Avatar del usuario andres andres y como los recibes en javascript?
  • Avatar del usuario sdasdas sdasdas WINDOWS 7 ---> C:\Program Files\Common Files\Adobe\OOBE\PDApp\UWA
  • Avatar del usuario Mariano Fuenzalida Mariano Fuenzalida Disculpa, cuando despliego el menú de ayuda en photoshop...
  • Avatar del usuario Metztli Metztli Ese código de php, ¿funciona para magento?
  • Avatar del usuario daniel daniel Buenas tardes quisiera saber como se escribe mi nombre...
  • Avatar del usuario Omar Omar Hola: Estoy rehaciendo mi web que es un gran catálogo y quiero...
  • Avatar del usuario carlos carlos muchas por tu aporte

Lo más comentado

Lo más visto

Post al azar

Añadir icono dentro de un Input

(1)
10 / Marzo / 2010
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.

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

votar

Artículos relacionados

Sobre KeLDroX

296

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

1
Avatar del usuario Ricardo

Me sirvió mucho esta información. Era justo lo que estaba buscando. Muchas gracias.

Ricardo
02/12/2012 02:44:45

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.

Sigue a rutarelativa en twitter
Editores de Ruta Relativa
Avatar del editor KeLDroX KeLDroX 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.
Avatar del editor sergiocius sergiocius Soy un desarrollador en entornos web y escritorio, entusiasta y amante de mi trabajo del que cada día espero aprender algo nuevo. Tengo una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y actualmente curso el primer año de Carrera Universitaria con el poco tiempo que me deja el trabajo. Fundé rutarelativa porque quiero que mi esfuerzo y tiempo invertidos en aprender y poner en práctica algo le resulte útil y fácil a otro usuario, del mismo modo que yo aprendo y ahorro tiempo con la ayuda de los demás.
Avatar del editor Victor Victor Desarrollador de aplicaciones informáticas con altos objetivos y ambiciones. Busco cada día aprender algo nuevo, ya que mi mundo se encuentra en constante actualización. Cuento con una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y una larga experiencia profesional.