WordPress Search Form without Search Button

WordPress Search Form without Search Button

From ThaiiS Note (Wiki)

Jump to: navigation, search

The code

(extra newlines have been added to the code to make it fit the page properly)

<?php $search_text = "Search"; ?> 
<form method="get" id="searchform"  
action="<?php bloginfo('home'); ?>/"> 
<input type="text" value="<?php echo $search_text; ?>"  
name="s" id="s"  
onblur="if (this.value == '')  
{this.value = '<?php echo $search_text; ?>';}"  
onfocus="if (this.value == '<?php echo $search_text; ?>')  
{this.value = '';}" /> 
<input type="hidden" id="searchsubmit" /> 
</form>

Styling the form

Using CSS, it is easy to adjust your form. For example, if you want to define the exact width of the search field, you could wrap a div around it like this:

<div class="search-form">
(form code goes here)
</div>

Styling the form

Using CSS, it is easy to adjust your form. For example, if you want to define the exact width of the search field, you could wrap a div around it like this:

<div class="search-form">
(form code goes here)
</div>

And then in your CSS file, add the following:

.search-form input {
  width: 150px;
}