Drupal 7 custom search form elements: https://www.drupal.org/node/154137
<?php
function YOURTHEME_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'search_block_form') {
$form['search_block_form']['#title'] = t('Search'); // Change the text on the label element
$form['search_block_form']['#title_display'] = 'invisible'; // Toggle label visibilty
$form['search_block_form']['#size'] = 40; // define size of the textfield
$form['search_block_form']['#default_value'] = t('Search'); // Set a default value for the textfield
$form['actions']['submit']['#value'] = t('GO!'); // Change the text on the submit button
$form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/search-button.png');
// Add extra attributes to the text box
$form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = 'Search';}";
$form['search_block_form']['#attributes']['onfocus'] = "if (this.value == 'Search') {this.value = '';}";
// Prevent user from searching the default text
$form['#attributes']['onsubmit'] = "if(this.search_block_form.value=='Search'){ alert('Please enter a search'); return false; }";
// Alternative (HTML5) placeholder attribute instead of using the javascript
$form['search_block_form']['#attributes']['placeholder'] = t('Search');
}
}
/**
* Changes the search form to use the "search" input element of HTML5.
*/
function YOURTHEME_preprocess_search_block_form(&$vars) {
$vars['search_form'] = str_replace('type="text"', 'type="search"', $vars['search_form']);
}
?>