My new site design is joining the cool kids by using LiveSearch. But I wanted to go one step cooler - with a few wee HTML extensions, Safari replaces the boring square search box with a curvy one that anti-aliases beautifully into the background.

Without Field Focus

With Field Focus

Here's how you do it: you add non-standard attributes to the input field:

type="search"

This renders the round-ended box, with the focus blurs and the yada

autosave="easyweb"

Saves and accesses your previous searches terms, and allows you to have different saved searches for different fields.

results="16"

Defines how many terms to return

placeholder="Search"

Puts the word Search in there, clears it on focus, and restores it on blur. Clever, eh?

So far, so Let's be nice to Safari. But I wanted to do the same thing f or other modern browsers too - specifically Firefox and IE6. This is normally fairly easy - use CSS to stick a background image on the surrounding div, and remove the background and border from the input. But if you're telling Safari to do funky stuff with the field, it will still do it, and it adds the Safari-specifics on top of the CSS, which looks awful.

So, I needed to turn off the CSS tricks for Safari. Easy to say, but Safari's CSS support is so strong, there don't seem to be any effective Safari (and Safari only): ignore this bit hacks.

To exclude Safari from CSS rules, it seems the easiest way to do it is to target the other browsers specifically. According to the latest CSS filters list, the following hack is applied by Moz1.2+ (and OSX/IE5.x, oddly), but not by Win/IE or Safari:

To target IE4+, our old friend

So if we set CSS behaviour to not include the funky background, then over-ride it with the hacks above, then:

• Safari will do its own thing - success
• Moz1.2+ will over-ride with #testElement:lang(en) - success
• Win/IE will over-ride with * html #testElement - success

Results

Internet Explorer (6)

Without Field Focus

With Field Focus

Firefox (1.5)

Without Field Focus

With Field Focus

The selected glows are of course achieved with an onfocus class swapping Javascript function to use an appropriate image.