By default search inputs are notoriously ugly. Just look at what they are: a plain text input. But Apple had the great idea to make a search widget for Safari that looks like this:

This is probably nothing new, it's been around for quite a while, but the code used to create the field (input type "search" instead of "text") does not validate and only works in Safari. So what happens when you like the search field and what to use it on other browsers?

I recently ran into this predicament and decided to put together a little javascript that creates the proper inputs.

That way on firefox/ie/opera (all i tested), I can get this:

Here is the source code (javascript, css and images): safari-like-search.zip

How to use

Edit the javascript file to point to the id of your search element, what you want the placeholder value to say and whether or not you want autosave (Safari only).

Add the CSS to your own and update the input's width.

Caveats

You must place the search element within a block element by itself (i.e. a paragraph or a divider).

The input's font size must be 11 pixels unless you recreate the images yourself.

Uses clearfix to clear the element holding the search. You can simply clear the following element and remove the clearfix.

Should use onDomReady, but it isn't using a library. If you are using a framework, you can simply plug this into the event handler.

Final Note

I put this together rather fast, so the code may not be great, but I figured I'd share it because maybe you like Safari's inputs too. :)

Final Final Note

Apple uses a similar script on their website; however, this script is missing the AJAX qualities and some of the other advanced functions.