I’m in the middle of converting seamsboutiquesf.com into a WordPress theme and trying to customize the search bar, I wanted the search bar to show “Search” within the text field. This part was easy. All I had to do was put a value=”Search”.

<input type="text" results="5" id="s" name="s" value="Search" />

The problem with this is that when a user clicks the search bar, the text that you placed within the search box does not go away, forcing the user to remove the default text before typing out their search word/phrase.

I found a really cool site that showed me not only how to remove the default text when the user clicks the search box, but provides the javascript code and directions in a really nice and simple way.

Step 1: Place the two javascript files in your root directory.
– util-functions.js
– clear-default-text.js

Step 2: Place the two javascript references within the search bar page.

<script type="text/javascript" src="util-functions.js">
<script type="text/javascript" src="clear-default-text.js">

Step 3: Place the class=”cleardefault” within all the text inputs.

<input type="text" results="5" id="s" name="s" class="cleardefault" />

Source: http://www.yourhtmlsource.com/forms/clearingdefaulttext.html