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:

So I came across a problem using a old CSS trick to make a tab strip/menu bar on a site from a Unordered List inside a Div

To create the tabs the trick is you can use some CSS like this:

#nav
{ 
   float:left ; 
   margin: 0; 
   padding: 10px 0 0 46px; 
   list-style: none;
}
#nav li
{ 
   font-size: 150%; 
   float: left; 
   margin:0; 
   padding: 0;
}
#nav a
{ 
   float: left; 
   display: block; 
   margin: 0 1px 0 0 ; 
   padding: 4px 8px; 
   color: #333; 
   text-decoration: none; 
   border: 1px solid #949494; 
   border-bottom: none; 
   background: #686868; 
   color: #949494;
}

...to turn a <UL> with the ID="nav" into some tabs.  For example we add the following to the master page:

OK so far.  The thing with tabs is you always want the tab of the current page to glow a little or something to indicate what page the user is up to.

A common way is to assign an ID attribute to the body tag of each page and include some CSS that looks at the body ID and overrides the #nav a  for the current page.

The trick comes when the pages all descend from an ASP.NET 2.0 Master Page - the body tags are going to be identical on each page.

As luck would have it, CSS lets us select based on any attribute.  Once the page is rendered each page will get its own form tag where the Action attribute represents the current loaded page as so:  

<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">

Which would let us add the following to our stylesheet:

#nav a:hover, body form[action="Default.aspx"] #NavPlaceHolder #nav #navHome a
{
   background: #ffffff;
}

OK So far but the problem is it is case sensitve!  We would need - If the page loads as default.aspx our tab won't highlight.  This just won't do!

The trick is to add a new ContentPlaceHolder in our master page straight above the UL listed above

<asp:ContentPlaceHolder runat="server" id="pageIdPlaceHolder" ></asp:ContentPlaceHolder>

Each page that descends from our master page should then override that ContentPlaceHolder to add an empty Span with a page-specific ID as so:

<asp:Content ID="pageIdContent" ContentPlaceHolderID="pageIdPlaceHolder" runat="server" >
   <span id="ProductsPage"></span> <!-- This page will show the Products tab as selected -->
</asp:Content>

and then we can add a rule to our CSS for each page that would read:  Whenever there is an element with the ID="ProductsPage" right next to one with the ID="nav" do the following.  The + operator selects the next adjacent node in the document as so: