I wanted to emulate certain sites where the search box is populated with “Search…” in grey coloured italic font, but as soon as you click on it and start typing, your query appears in black normal font.
The examples I was able to find were horribly complex and I was unable to get my head around them in the time available, so as an interim measure to get the effect I wanted I wrote my own:
<input type="text" name="q" style="width: 105px; font-style:italic; color:grey;" value="Product Search..." onFocus="this.value = ''; this.style.fontStyle='normal'; this.style.color='black';" onblur="this.value = 'Search...'; this.style.fontStyle='italic'; this.style.color='grey';"/>
The drawback to this is that you cannot use a search button to submit the form – as soon as focus of your browser leaves the textbox (i.e. when you click the button) the text box reverts back to the value of “Search…“. The button has been removed from the form where I’ve used this so users must press the enter key on their keyboard to submit their query.
Interestingly, even though people are searching all the time, and this has been live for a day or so now, I’ve not had a single complaint from a user that the search button has gone….