What is the CSS secret of the Google search box?

StackOverflow https://stackoverflow.com/questions/574671

  •  05-09-2019
  •  | 
  •  

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.

Was it helpful?

Solution

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

OTHER TIPS

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

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;
}

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

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top