CODEWITHSUNDEEP
cssuser-interfacesearch-box
picardo
picardo

Reputation: 24886

What is the CSS secret of the Google search box?

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.

Upvotes: 3

Views: 8631

Answers (6)

Zack The Human
Zack The Human

Reputation: 8481

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

Upvotes: 10

Horace
Horace

Reputation:

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.

Upvotes: 0

hadith
hadith

Reputation: 1

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.

Upvotes: 0

roman m
roman m

Reputation: 26521

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

Upvotes: 2

Barbaros Alp
Barbaros Alp

Reputation: 6434

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

Upvotes: 0

cletus
cletus

Reputation: 625037

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

Upvotes: 2

Related Questions