What we are going for is a search box that looks like this when the page loads:

...and looks like this when the user clicks into it:

This technique seems to mostly be applied to search boxes, and I can see the benefit in that.

The post that follows is the amalgum of many VS-A's

To get this done, it is a bit of CSS to style up the inactive and active state for the text box, and a tiny bit of Javascript to tie it together.  I'm using the term active and inactive not in any technical sense, just to describe the two styles that are applied to our text box in response to the user activity.

(assuming the rest of the page is a drab #f0f0f0 in colour...)  These are the two style rules that we are using in the images above:

.inactiveSearchBox
{
    background-color: #f0f0f0;
    border: solid 1px #ffffff;
}

.activeSearchBox
{
    border: groove 1px #d9d9d9;
    background-color: #ffffff;
}

The markup for the input box is then as follows: