Cómo resaltar los formularios

Una consulta simple me ha obligado a buscar la respuesta en la red: ¿cómo hacer que el color de fondo de un elemento de un formulario, cambie de color cuando hacemos click dentro de él y luego vuelva a su color original?

¡Ah, es simple!, pensé yo y me acordaba de haberlo implementado en los formularios de comentarios de bolsanegra. Simplemente se utiliza una de las llamadas pseudo-clases, en este caso, onfocus. Por ejemplo, definiendo las propiedades para un área de texto de esta manea:

textarea {
background-color: #FFFFE0; /* color normal */
}

textarea:focus {
background-color: #FFFFFF; /* color resaltado */}

El área de texto tiene un color amarillo, cuando hacemos click se vuelve blanco y al salir, vuelve a ser amarillo. Sencillo pero hay un problema, no funciona en Internet Explorer.

Moraleja, hay que recurrir al Google y buscar la respuesta. Por suerte, en Dynamic Drive hay un script que resuelve el tema y permite colorear los elementos de cualquier formulario cuando hacemos click dentro de ellos.

Primero que nada, alojamos el script en nuestro servidor y lo agregamos a la plantilla, dentro del encabezado, por ejemplo, antes de la etiqueta </head>:

<script src="URL_archivo" type="text/javascript"></script>

Lo vamos a utilizar, añadiendo la llamada dentro de la etiqueta form:

<form [atributos comunes]
onkeyup="highlight(event)" onclick="highlight(event)">

<script type="text/javascript">
var highlightcolor="COLORresaltado";
var ns6=document.getElementById&&!document.all;
var previous='';
var eventobj;
var intended=/INPUT|TEXTAREA|SELECT|OPTION/;

// verificar el elemento sobre el que se hace click
function checkel(which) {
if (which.style&&intended.test(which.tagName)) {
if (ns6&&eventobj.nodeType==3)
eventobj=eventobj.parentNode.parentNode;
return true;
} else
return false
}

// iluminar el elemento
function highlight(e){
eventobj=ns6? e.target : event.srcElement;
if (previous!='') {
if (checkel(previous))
previous.style.backgroundColor='COLORnormal';
previous=eventobj;
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor;
} else {
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor;
previous=eventobj;
}
}
</script>

Hay dos valores que indican el color y que podemos configurar a nuestro gusto:

var highlightcolor='COLORresaltado';
establece cuál será el color de fondo cuando se produce el evento, o sea, el que se mostrará cuando hacemos click dentro de él.

previous.style.backgroundColor='COLORnormal';
establece el color de fondo normal de los elementos del formulario