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.
? I did some research (a.k.a. banging my head against the wall) and figured out how this morning. It isn't too tough, now that I've figured out how. You can 
