Hint text in search box removes by clicking

Home>>Web development>>Search code sitemap>>here

Hint text in search box is a helpful and recommended feature.As new visitor may not know what to do with search box.
But simple hint text has this limitation that ,the hint text has to be deleted manually.
A automatically removal of hint text is so expected and its so easy.

Also a hover effect on the click button is recommended,as without hover effect visitor may confuse where to click plus it will be an extra style.

Search code with hint text plus click and go feature

Click in the form field and the inside will be removed atomically.

Demo:

[Code]

<form action="/search" class="srch-form" id="searchthis" method="get" style="display: inline;">
<input class="hint-text" id=" search-box" name="q" onclick="this.value='';" onfocus="this.select();" size="25" type="text" value="write here and click search" /><input class="srch-button" id="search-btn" type="submit" value="Search" /></form>

[Code]

<style type="text/css">
.srch-form
{
padding:3px 3px 3px 3px;
margin:3px 3px 3px 3px;
}
.hint-text
{
padding:5px 3px 5px 10px;
margin:3px 3px 3px 3px;
border:1px solid #817679;
background:#F2F2F2;
font-size:11px;
}
.srch-button
{
padding:3px 5px 3px 5px;
margin:3px 3px 3px 3px;
background:#7F4E52;
color:#FFFFFF;
font-size:12px;
font-family: Georgia, 'Times New Roman', serif;
text-align:center;
}
.srch-button:hover
{
background:#800517;
}
</style>

---