How To Add Placeholder Text To Your WordPress Search Box

I finally dropped the button for the search field in the latest update of the Nusuni Dot Com theme, so I decided to put placeholder text in the search box instead. Here’s how I did it:

The HTML

Here’s the HTML code I use:

<div class="searchform">
  <form method="get" action="<?php bloginfo('home'); ?>/">
<input type="text" value="Search Nusuni Dot Com..." name="s" class="searchbox" onfocus="if(this.value == 'Search Nusuni Dot Com...') { this.value=''; this.style.color='#000000'; }" onblur="if(this.value == '') { this.value = 'Search Nusuni Dot Com...'; this.style.color='#888888'; }" />
</form></div>

Basically the initial value of the field is set to “Search Nusuni Dot Com…”, and if you click on the field when the text is equal to that, the text disappears and the text color is changed to the normal black. If you click off of the field and nothing is entered, the text color changes to the gray and the placeholder text is put back in it.

The CSS

This is the CSS I used for the whole search form:

.searchform {
	float: right;
	width: 170px;
	position: relative;
	margin-right: 10px;
}

.searchbox {	
	width: 170px;
	margin-bottom: 5px;
	margin-top: 5px;
	color: #888888;
}

Nice and simple, but makes your search field look really sexy. Even better, it is compatible with pretty much all somewhat-modern browsers (including IE 6).

Please subscribe, or else I will cry. Do you really want to make a programmer cry?