Seguro que habréis visto algún que otro formulario en el que al posicionarse en un campo, la caja de texto cambia de estilo (color de fuente, color de fondo, tamaño, etc …).

Hoy vamos a explicar como podemos hacer que un formulario cambie de color de fondo al posicionarnos en él de una manera sencillisima.

Para empezar vamos a crear un formulario bastante siemple con dos campos: usuario y password:

[html]

[/html]

Ahora mismo no tiene ningún estilo, asi que vamos a darle un primer cambio, poniéndo el fondo de un color gracias a CSS, para ello vamos a añadir entre las etiquetas head el siguiente código:

[css]

[/css]

Y para hacer referencia, añadiremos la llamada a dicha clase en los campos de texto con la etiqueta class, de la siguiente forma:

[html]

[/html]

Con este cambio no basta, ya que tenemos que tener en cuenta el comportamiento para cuando el usuario hace clic en el campo de texto, para eso utilizaremos la función onFocus de Javascript, añadiendolo en cada uno de los campos:

[html]

[/html]

Para que funcione tendriamos que añadir también el estilo css para cuando nos posicionamos en el campo, que en este caso lo hemos llamado input_confoco

[css]

[/css]

Es hora de probarlo.

Si habéis probado un poco este formulario, veréis que falta algo por hacer ¿verdad?. Pues sí, faltaría el estado on_blur que sería cuando el campo pierde el foco. Ya que ahora mismo, si hacemos clic en el primer campo y despues en el segundo, el fondo sigue teniendo el mismo color que en on_focus.

Vamos a arreglarlo con la función onBlur de javascript:

[html]

[/html]

Ahora si lo probáis, y vais haciendo clic en un campo y en otro veréis como el estilo vuelve al inicial si quitamos el foco.

El código completo del ejemplo con un poco de estilo sería el siguiente:

[html]

[/html]
Para cualquier duda, ya sabéis, escribir comentarios.