• Martes 24 de Mayo de 2022, 11:29

Autor Tema:  Como poner icono dentro de los formularios login?  (Leído 9418 veces)

franz.

  • Miembro activo
  • **
  • Mensajes: 55
  • Nacionalidad: mx
    • Ver Perfil
    • http://imgeek.net
Como poner icono dentro de los formularios login?
« en: Viernes 11 de Julio de 2008, 03:17 »
0
Hola, que tal tengo la duda, pues lo que intento es poner las imagene dentro de los recuadros
img145.imageshack.us/img145/4668/login0dq2.png  <-- poner en su navegador para ver la imagen ya q no tengo permisos pa publicar imagenes ni enlaces.
me refiero al de icono de la llave y el otro al del usuario, alguien me puede explicar?
muchas Gracias.
Citar
[th3r0rn@Linux ~]$ uname -a
Linux Linux 2.6.25-ARCH #1 SMP PREEMPT Sat Jun 14 18:07:19 CEST 2008 i686 Intel(R) Celeron(R) M CPU 420 @ 1.60GHz GenuineIntel GNU/Linux

F_Tanori

  • Moderador
  • ******
  • Mensajes: 1918
  • Nacionalidad: mx
    • Ver Perfil
    • http://www.ingenieria-soporte.com
Re: Como poner icono dentro de los formularios login?
« Respuesta #1 en: Viernes 11 de Julio de 2008, 21:28 »
0
A ver...

Te dejo un ejemplo


Saludos
El mensaje contiene 1 archivo adjunto. Debes ingresar o registrarte para poder verlo y descargarlo.



" ExIsTo y A vEcEs PiEnSo "

NOTA:
===========================================================================================================================
Este foro es para ayudar, aprender, compartir... usenlo para eso,
NO SE RESUELVEN DUDAS POR MENSAJE PRIVADO Y MENOS POR CORREO
===========================================================================================================================

Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Como poner icono dentro de los formularios login?
« Respuesta #2 en: Viernes 11 de Julio de 2008, 21:36 »
0
Cita de: "franz."
Hola, que tal tengo la duda, pues lo que intento es poner las imagene dentro de los recuadros
img145.imageshack.us/img145/4668/login0dq2.png  <-- poner en su navegador para ver la imagen ya q no tengo permisos pa publicar imagenes ni enlaces.
me refiero al de icono de la llave y el otro al del usuario, alguien me puede explicar?
muchas Gracias.
franz. Podrías hacer lo siguiente:

1) Create una clase CSS como esta:
Código: CSS
  1. .inputUsuario
  2. {
  3.     background-image: url('imgLogueoUsuario.png');
  4.     background-position: 1px center;
  5.     background-repeat: no-repeat;
  6.     padding:0 0 0 16px;
  7. }
  8.  
El padding es para que el texto no aparezca sobre la imágen, le puse 16px como si la imagen tuviese 14 px.

Después simplemente cuando declarás el Input, le decís que la clase css es la que acabaste de crear:

Código: Text
  1. <input type="text" class="inputUsuario" />
  2.  

Un saludo
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

Mollense

  • Miembro de PLATA
  • *****
  • Mensajes: 1755
  • Nacionalidad: ar
    • Ver Perfil
    • http://solocodigo.com/
Re: Como poner icono dentro de los formularios login?
« Respuesta #3 en: Viernes 11 de Julio de 2008, 21:39 »
0
Cita de: "F_Tanori"
A ver...

Te dejo un ejemplo


Saludos
Jaja, ¡pero que códigos tan parecidos!.  :beer:
"Los que renuncian son más numerosos que los que fracasan" H.F.
"No se cómo sería la III Guerra Mundial, pero la cuarta sería con piedras" A.E.
"Quién no fía no es de fiar..."


...no te quedes mirando.

franz.

  • Miembro activo
  • **
  • Mensajes: 55
  • Nacionalidad: mx
    • Ver Perfil
    • http://imgeek.net
Re: Como poner icono dentro de los formularios login?
« Respuesta #4 en: Sábado 12 de Julio de 2008, 01:15 »
0
Muchas Gracias a  todos vosotros por los ejemplos, ya le he entendido y le estoy aplicando mas estilos, muchas gracias de nuevo  :lol:
Citar
[th3r0rn@Linux ~]$ uname -a
Linux Linux 2.6.25-ARCH #1 SMP PREEMPT Sat Jun 14 18:07:19 CEST 2008 i686 Intel(R) Celeron(R) M CPU 420 @ 1.60GHz GenuineIntel GNU/Linux