SharePoint 2010 Branding: Fancy search boxes with CSS only

Want to spice up your SharePoint 2010 search boxes only using CSS? Here's an example of how you can achieve it.

He will go from this:

To this:

The main idea behind my implementation is that I'll have a big background image for the whole search area (text input and button). Then, I will match the width and height of the elements to the width of the "fake elements" in the background image. To finish I only need to camouflage the controls, all borders and background colors need to go.

To give you a better idea of how this works, here's the search box with the controls not hidden yet (you only see a small area for the button because the image inside it is to small, it should be the same width as the background button):

Here's the complete code I used to achieve this:

#s4-searcharea {
    background: transparent url('/_layouts/images/custom/search-box.png') no-repeat scroll 0 0;    
    height: 30px; /* height of image */
    width: 354px; /* width of image */
}

.s4-search input.ms-sbplain {
    background: transparent;
    border-color: transparent !important;
    color: #9ca052;
    height: 23px;
    padding-left: 30px; /* to acomodate the magnifier icon */
    padding-top: 0 !important;   
    width: 247px !important;
}

#banner .ms-sbgo a {
    border-color: transparent !important;
    display: block;
    height: 30px;
    width: 70px !important;
}

#banner .ms-sbgo > a > img {
    display: none;
}

Here's a couple of examples of the usage of this technique: