What is the CSS secret of the Google search box?

Question

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 1

No secret. It's a normal text box... Google's home page has always famously been minimalist.

Answer 2

The simplicity of thier homepage is what made me change to google from excite.com (about 2000). Back in the days of 14.4 modems, it was refreshing to have a search page you didnt have to wait for.

Nothing, but Nothing, but Search.

Answer 3

It is all about Chrome, it applies an outer glow effect when you focus on any textbox with this browser.

Answer 4

not sure about their home page, but they do the same in Gmail, and there's CSS involved:

.mFwySd:focus
{
border:2px solid #73A6FF !important; 
margin:0 !important;
outline-color:-moz-use-text-color !important; 
outline-style:none !important; 
outline-width:0 !important; 
}

.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}

Answer 5

It does not look like they are stylizing the search box. But if they wanted to they could just use the native html tag 'input'. You just have to reference it in the CSS file.

input { padding:???; margin:???; background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0; color:#??????; text-align:????; font:normal ?em/?em arial; }

This would just cover the search field box. If you needed to cover the button, just add a class to your button input field.

I always use '.btn'

input.btn { padding:???; margin:???; background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0; color:#??????; text-align:????; font:normal ?em/?em arial; }

Now this should give you complete control over any 'input' field on you entire website.

Answer 6

Now that the some browser such as firefox are able to read css3 u can use that to have corner radius, im using it now! although its not valid by w3c yet.