<style type="text/css">
input {
   border: 2px solid #ccc;
}

input:focus {
   border: 2px solid #000;
}
</style>

<input type="text" name="myfield" id="myfield"
      onfocus="this.style.border='2px solid #000'"
      onblur="this.style.border='2px solid #ccc'">

<script type="text/javascript">
addEvent(window, 'load', function() {
  var input, textarea;
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; (input = inputs[i]); i++) {
     addEvent(input, 'focus', oninputfocus);
     addEvent(input, 'blur', oninputblur);
  }
  var textareas = document.getElementsByTagName('textarea');
  for (var i = 0; (textarea = textareas[i]); i++) {
     addEvent(textarea, 'focus', oninputfocus);
     addEvent(textarea, 'blur', oninputblur);
  }
});

function oninputfocus(e) {
   /* Cookie-cutter code to find the source of the event */
   if (typeof e == 'undefined') {
      var e = window.event;
   }
   var source;
   if (typeof e.target != 'undefined') {
      source = e.target;
   } else if (typeof e.srcElement != 'undefined') {
      source = e.srcElement;
   } else {
     return;
   }
   /* End cookie-cutter code */
   source.style.border='2px solid #000';
}

function oninputblur(e) {
   /* Cookie-cutter code to find the source of the event */
   if (typeof e == 'undefined') {
     var e = window.event;
   }
   var source;
   if (typeof e.target != 'undefined') {
      source = e.target;
   } else if (typeof e.srcElement != 'undefined') {
      source = e.srcElement;
   } else {
     return;
   }
   /* End cookie-cutter code */
   source.style.border='2px solid #ccc';
}
</script>