What is the CSS secret of the Google search box?

picardo picture picardo · Feb 22, 2009 · Viewed 8.1k times · Source

I am studying the css methods Google uses to create their ui. I realized that the css code on their home page contains no reference to their search box; it seems like just a naked input tag, with not a border, background image or any of the conventions normally used to stylize a border. And yet it can display not only a hue and a kind of gradient, but it is slightly round and also reacts to the cursor focus.

So, your guess is as good as mine. Please use your Firebug to check it out and help me get to the bottom of this riddle.

http://www.google.com/

EDIT: Just to be clear, I'm not trying to make an aesthetic judgment. Although I think minimalism of Google's homepage is fantastic, I am really interested to find out the techniques they used to stylize the borders around their search box -- without using any css whatsoever.

Answer

Zack The Human picture Zack The Human · Feb 22, 2009

Are you using a mac? Aren't all of the native UI elements round, glow, and change color?

Do you have any add-ons like the Google Toolbar which could be modifying the UI of the page without you being able to detect it?

Edit: The technique asked about in the question really has nothing to do with CSS and everything to do with the browser. The text input on the Google home page has no CSS style applied to it and is therefore left to the browser to decide how it looks. Here's what it looks like when the field has focus in Google Chrome:

removed dead ImageShack link