Foros del Web » Creando para Internet » CSS »

Cambiar el estilo de un input al recibir foco

Estas en el tema de Cambiar el estilo de un input al recibir foco en el foro de CSS en Foros del Web. Hola gente: Me gustaría saber como hacer para que, al posicionar el cursor sobre un input text, cambie el estilo del input (para resaltar lo ...
  #1 (permalink)  
Antiguo 08/04/2005, 12:45
Avatar de Kriminal  
Fecha de Ingreso: julio-2004
Ubicación: Buenos Aires
Mensajes: 19
Antigüedad: 20 años, 4 meses
Puntos: 0
Cambiar el estilo de un input al recibir foco

Hola gente:
Me gustaría saber como hacer para que, al posicionar el cursor sobre un input text, cambie el estilo del input (para resaltar lo que el usuario está haciendo - cargando el input -)

por ejemplo, si mi input es:
Código:
input{
background: #FBFBFB; 
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #585858;
border: 1px solid #707070;
}
que al recibir foco se transforme en
Código:
input.foco{
background: #FFF; 
border: 1px solid #000;
}
Intuyo que se debe usar algun evento javascript, pero no termino de lograrlo.

Bueno, muchas gracias desde ya,

Kriminal
__________________
No sabiendo que era imposible, fue y lo hizo.
kriminal the vampire

Última edición por Kriminal; 08/04/2005 a las 13:03
  #2 (permalink)  
Antiguo 08/04/2005, 13:08
Avatar de Kriminal  
Fecha de Ingreso: julio-2004
Ubicación: Buenos Aires
Mensajes: 19
Antigüedad: 20 años, 4 meses
Puntos: 0
Ah... encontré una solución parcial.. funciona en Mozilla pero no en IE
Es agregar directamente la propiedad "focus" al elemento "input"

Código:
input:focus{
background: #FFF; 
border: 1px solid #000;
}
Si alguien sabe como "arreglarlo" para que también funcione en IE, agradecidísimo.
__________________
No sabiendo que era imposible, fue y lo hizo.
kriminal the vampire

Última edición por Kriminal; 08/04/2005 a las 13:18
  #3 (permalink)  
Antiguo 08/04/2005, 13:19
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
Hola Kriminal

Intentalo usando JavaScript:
Código:
<input type="text" onfocus="this.className='foco'" onblur="this.className=''" />
Saludos,
  #4 (permalink)  
Antiguo 08/04/2005, 13:38
Avatar de Kriminal  
Fecha de Ingreso: julio-2004
Ubicación: Buenos Aires
Mensajes: 19
Antigüedad: 20 años, 4 meses
Puntos: 0
Excelente! Funciona a la perfección.
Muchas gracias JavierB !!
__________________
No sabiendo que era imposible, fue y lo hizo.
kriminal the vampire
  #5 (permalink)  
Antiguo 09/04/2005, 09:18
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
Me alegro de que ta halla resultado útil. Hasta pronto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:45.