Change the style of font inside a search textbox

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….

Advertisements
Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: