You can also customize Magento's search feature through the Magento templates. The search feature is especially important for stores with a large number of products, so ensuring that it is in a prominent place and looks like a search feature is very important.

Firstly, to overwrite the template used for the search form in the header, copy the search.mini.phtml file at /app/design/frontend/base/default/template/catalogsearch/ into the /app/design/frontend/default/m18/template/catalogsearch directory, and find the following lines that constitute the Search button:

<button type="submit" title="<?php echo $this->__('Search') ?>" class="button">
<span><span>
<?php echo $this->__('Search') ?>
</span></span>
</button>

Remove the <span> elements highlighted in the preceding code, as these are no longer required in the new theme. Open your theme's styles.css file to provide some basic styling for the search text box and change its border color when it is focused on the following:

.input-text {
border: 1px #CCC solid;
border-radius: 3px;
padding: 3px;
}
  .input-text:active, .input-text:focus {
  border-color: #e57d04;
  }

Next, you can add some styling to the buttons throughout your theme:

.button {
background: #e57d04;
border: none;
border-radius: 3px;
color: #fff;
font-weight: bold;
padding: 3px;
text-align: center;
}
.button:active, .button:focus {
background-color: #333;
}

Finally, you can add some styling to the search button specifically to include an image that will help your customers identify its purpose more easily:

.form-search .button {
background-image: url("../images/search.png");
background-repeat: no-repeat;
background-position: 3px center;
padding-left: 24px;
}

If you now refresh your Magento theme, you will see the change take effect: