jQuery Add Default Text To Search Input Box

Use jQuery to add default text to your search box. Simple but effective!

The text dissapears when you click the search box
The text shows as default when the box is empty
The box appears shaded and is highlighted whiter when you hover over it

See Live Demo
The following goes into the JavaScript:


$('#search').blur(function(){
	if (this.value == '') {
		this.value = 'Search BLOGOOLA';
	}
})

The following goes into the HTML:

The following goes into the CSS:


#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

This is the image for the form button:

Frequently Asked Questions (FAQs) about Adding Default Text to Search Input

How can I add default text to a search box in HTML without using JavaScript?

While JavaScript is a common method for adding default text to a search box, you can also use the HTML “placeholder” attribute. This attribute specifies a short hint that describes the expected value of an input field. For example, you can use <input type="search" name="search" placeholder="Enter search term...">. The text “Enter search term…” will appear in the search box until the user starts typing.

How can I change the color of the placeholder text in my search box?

You can change the color of the placeholder text using CSS. The “::placeholder” selector is used to select and style the placeholder text. Here’s an example:
::placeholder {
color: red;
}
This will change the color of the placeholder text to red.

How can I make the placeholder text disappear when the user clicks on the search box?

The placeholder text automatically disappears when the user starts typing in the search box. You don’t need to add any additional code for this functionality.

Can I use JavaScript to add default text to a search box?

Yes, you can use JavaScript to add default text to a search box. You can use the “value” property of the input element to set the default text. Here’s an example:
document.getElementById("mySearchBox").value = "Enter search term...";
In this example, “mySearchBox” is the id of the search box and “Enter search term…” is the default text.

How can I add an icon inside the search box?

You can add an icon inside the search box using CSS. You can use the “background-image” property to add the icon and the “background-position” property to position the icon. Here’s an example:
.search {
background-image: url('searchicon.png');
background-position: 10px 10px;
}
In this example, “searchicon.png” is the image file of the search icon.

How can I make the search box expand when the user clicks on it?

You can use CSS to make the search box expand when the user clicks on it. You can use the “:focus” pseudo-class to select the search box when it’s focused and the “width” property to change its width. Here’s an example:
input[type="search"]:focus {
width: 200px;
}
In this example, the width of the search box will change to 200px when it’s focused.

How can I add a “clear” button inside the search box?

You can add a “clear” button inside the search box by using the “type” attribute with the value “search”. This will automatically add a “clear” button inside the search box in some browsers. Here’s an example:
<input type="search" name="search" placeholder="Enter search term...">
In this example, a “clear” button will appear inside the search box when the user starts typing.

How can I style the “clear” button inside the search box?

You can style the “clear” button inside the search box using CSS. However, the CSS code will be different for different browsers because each browser has its own pseudo-element for the “clear” button. Here’s an example for Webkit browsers like Chrome and Safari:
input[type="search"]::-webkit-search-clear-button {
color: red;
}
In this example, the color of the “clear” button will change to red.

How can I make the search box submit the form when the user presses Enter?

You can make the search box submit the form when the user presses Enter by wrapping the search box inside a “form” element. Here’s an example:
<form action="/search">
<input type="search" name="search" placeholder="Enter search term...">
</form>
In this example, the form will be submitted when the user presses Enter in the search box.

How can I make the search box autofocus when the page loads?

You can make the search box autofocus when the page loads by using the “autofocus” attribute. Here’s an example:
<input type="search" name="search" placeholder="Enter search term..." autofocus>
In this example, the search box will automatically get focus when the page loads.