FireFocus!

Una de las cosas que me gustan del Safari, es como resalta los campos de los formularios a medida que los vamos completando. Lamentablemente Firefox e Internet Explorer no resaltan nada, pero podemos simular el efecto con unas simples reglas en el css.

En Firefox queda realmente muy lindo, incluso me gusta más que el de Safari porque es un poco más discreto.

Ver el demo (También lo pueden ver en acción en el formulario de comentarios, más abajo.)

input, textarea {
	padding: 4px;
	margin: 0px;		
	border-top: 1px solid #707070;
	border-bottom: 1px solid #cecece;
	border-left: 1px solid #ababab;
	border-right: 1px solid #ababab;	
}

input:focus, textarea:focus, .sffocus { 
	border-top: 1px solid #5d7ea4;
	border-bottom: 1px solid #6fa1d9;
	border-left: 1px solid #6fa1d9;
	border-right: 1px solid #6fa1d9;
	outline-color: #9fc0e6;
}

/* Firefox Only */
input:focus, textarea:focus, x:-moz-any-link {
	outline-width: 1px;
	outline-style: solid;
	-moz-outline-radius: 3px;
	-moz-outline-offset: 0px;
}

Con Internet Explorer hay que recurrir a javascript, para que agregue la clase al elemento. Yo estoy usando Suckerfishes:focus de Dan Webb, pero se puede hacer lo mismo con prototype o Jquery. El efecto no queda tan lindo como en firefox, pero al menos algo es algo.

Descargar Zip con el ejemplo

Obviamente, los colores los podes modificar a gusto.

Una pequeña aclaración: Esto afecta también a los radiobuttons y los checkbox. Los podes dejar afuera simplemente creando algunas clases específicas para esos elementos, o jugando un poco con los selectores de Css2.

Un Abrazo
Pablo