This is a normal <input type="text" /> search field with the class search.

In Safari, the type-Attribute gets the new value search. Thus, Safari users can benefit from the Safari-only <input type="search" />-Field , and the (X)HTML-Code is still valid.

Additionally, in non-Safari browsers, the search field is filled with the text "Search this Site..." as long as it is empty and unfocused.

The script performs the described action on every input-Element that has the class search applied to it. So it is not dependant on any IDs.

All this is done by a simple Javascript. You need to include this script into your document to make it work:

var DEF_VAL = "Search this Site..."; // Default Value
var AUTOSAVE_URL = "com.themasta.tests" // Autosave URL
var NUM_RESULTS = 5 // Number of Results

var isSafari = ((parseInt(navigator.productSub)>=20020000)&&     // detecting WebCore
               (navigator.vendor.indexOf("Apple Computer")!=-1));
var myrules = {
    'input.search' : function(element){
        if (isSafari) {
            // changing type to "search"
            element.setAttribute('type', 'search');
            element.setAttribute('placeholder', DEF_VAL);
            element.setAttribute('autosave', AUTOSAVE_URL);
            element.setAttribute('results', NUM_RESULTS);
        } else {
            // doing the "Search this Site..."-Displaying- & -Hiding-Stuff
            element.onfocus = function() { if (this.value==DEF_VAL) this.value = ''; };
            element.onblur  = function() { if (this.value=='')      this.value = DEF_VAL; };
            if (element.value=='') element.value = DEF_VAL;
        }
    }
};

Behaviour.register(myrules);

As the script uses Behaviour, you have to include behaviour.js as well.