The following code sample can be used to change the appearance of the active HATS input field.

<script type="text/javascript">
function highlight(e) {
   //get event from browser
   if (!e) var e = window.event;
      var element =  e.srcElement || e.target;
      if(element != null){
         //focus event occurs when input gains focus
         if(e.type == 'focus'){
            //store previous background color if it exists
            element.style.oldColor = element.style.backgroundColor;
            //set new background color to specified value
            element.style.backgroundColor="#ffff90";
         }
         //blur event occurs when input loses focus
         else if(e.type == 'blur'){
            //if input had a specific background color restore it
            if(element.style.oldColor) {
               element.style.backgroundColor = element.style.oldColor;
            }
            //else set background color back to white
            else {
               element.style.backgroundColor = "#FFFFFF";
            }
         }
      }
}

function initInputs() {
   //get array with all input elements on HATS Form
   var inputs = document.HATSForm.getElementsByTagName("input");

   for (i=0; i<inputs.length; i++) {
      var attr = inputs[i].getAttribute("type");
      //assign events to inputs that are visible, text and password
      if ((attr == "text"|| attr == "password") && (attr != "hidden")) {
         //this syntax appends events instead of overwriting the current event list
         //Mozilla uses addEventListener to append events
         if(window.addEventListener) {
            inputs[i].addEventListener("focus",highlight,false);
            inputs[i].addEventListener("blur", highlight,false);
         } 
         //IE uses attachEvent to append events
         else if (window.attachEvent) {
            inputs[i].attachEvent('onfocus', highlight);
            inputs[i].attachEvent('onblur', highlight);
         }
      }
   }
}

//use window.onload event to run function once page is loaded
if(document.createElement) window.onload = function(){
   initInputs();
};
</script>

Using this code the resulting screen would look like this:

function highlight(e) {
   //get event from browser
   if (!e) var e = window.event;
   var element =  e.srcElement || e.target;
   if(element != null){
      //focus event occurs when input gains focus
      if(e.type == 'focus'){
         //store previous border color
         element.style.oldBorderColor = element.style.borderColor;
         //set new border color to specified value
         element.style.borderColor = "black";
      }
      //blur event occurs when input loses focus
      else if(e.type == 'blur'){
         //set the border color back to the original value
         element.style.borderColor = element.style.oldBorderColor;
      }
   }
}

Using this code the resulting screen would look like this:

The two options could also be combined to highlight the background and border together: