Sunken/Highlighted Input Fields with CSS
One thing I really like about TheServerSide's new look is the sunken input boxes (that light up on focus) in the top right corner. I noticed that Macromedia does this on a lot of their form's too. It's good stuff. Here's how easy it is to add this "feature".
In your stylesheet, add the following class definitions:
/* for cool looking "sunken" input boxes, from www.theserverside.com */ form#searchForm input { padding-left: 4px; margin: 1px 1px 1px 1px; border: 1px solid black; color: #777; background-image: url(../images/input_white.gif); } form#searchForm input.focus { margin: 0px 0px 0px 0px; border-bottom: #ffdead solid 2px; border-right: #ffdead solid 2px; border-left: #c07300 solid 2px; border-top: #c07300 solid 2px; color: #000000; }
Of course, restricting these classes to one form (as I've done with form id="searchForm") is optional. Then in your form's input fields, add: add a couple of onfocus and onblur event handlers:
onfocus="this.className='focus'" onblur="this.className=''"
You'll also need to grab the background image and put it on your site. If you're adding this to a form in your webapp, it might be easier to add all the event handlers with JavaScript:
var inputs = document.getElementsByTagName("input"); for (i=0; i < inputs.length; i++) { inputs[i].onfocus=function() {this.className='focus'}; inputs[i].onblur=function() {this.className=''}; }
Thanks to the guys at TheServerSide for showing me how to do this - I dig it.