Search Bar

CSS / HTML

<style type="text/css">
#search-bar { width:175px; height:29px; background:#000 url('search-bar.png') 0 0 no-repeat; }
#search .field { float:left; margin:5px 0 0 8px; font:8pt Verdana; color:#fff; font-style:italic; width:130px; height:20px; line-height:18px; padding:0; background:#000; border:0; }
#search .button { float:right; margin:7px 7px 0 0; }
</style>

<!--[if IE]><style type="text/css">#search.field { height:18px; }</style><![endif]-->

<div id="search-bar">
    <form id="search">
        <input type="text" class="field" maxlength="30" value="Search..." /><input type="image" class="button" src="search-button.png" title="Search..." />
    </form>
</div>

Notes

Tested in IE7/8/9/10, Firefox, Chrome, Safari and Opera on Windows, and Safari and Firefox on Mac.

I've used "height" and "line-height" to help keep vertical text alignment consistent in the form field, in major browsers on Windows and Mac.

Here, "line-height" appears to have no impact in any major browser on Windows, but it does on Mac, so I used it to target Mac - without the "line-height" setting, the form field text sits too low.

The form field text in Opera still sits a little bit too low for my liking, but it's acceptable, and considering the smaller market share of Opera users, it's probably OK to just roll with it.