Search Field OS X Style

Ever wanted a search form that looks (and behaves) just like Apple’s native search field? As you probably know, Safari uses it’s own rendering for form fields, making it extra difficult to style them if not impossible.

To compensate for this and to add some native apple interface extras into the Safari rendering, Safari has added some new attributes to the <input>:

• type="search": this triggers the search field appearance in Safari.
• incremental: control whether or not the search is performed as you type.
• placeholder: set the greyed placeholder text in the control.
• autosave: allows you to specify an autosave name for your search results in the dropdown.
• results: allows you to specify how many results should be displayed in the dropdown.

In addition to this, you can use the DOM event onsearch to to respond when the search happens. All these attributes are availible from OS X Tiger and up.

Doing some research in finding a semantic, accessible and well structured OS X styled form that works cross-browser, I found a working example that degrades nicely. It uses standard attributes in the source and adds the “special” attributes if the User Agent “Safari” was detected. It even adds that “x” to the right after typing for a while in non-Safari browsers. A nice example indeed!