3

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.

picardo
  • 24,530
  • 33
  • 104
  • 151
  • 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. – Toby Allen Feb 22 '09 at 10:01

6 Answers6

10

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

SuperBiasedMan
  • 9,814
  • 10
  • 45
  • 73
Zack The Human
  • 8,373
  • 7
  • 39
  • 60
  • No, I'm on a Windows Vista. No Google Toolbar either. I checked it out in different browsers and it looks mostly the same, except in Google Chrome, where the focus causes border to take on an orange hue. – picardo Feb 22 '09 at 10:01
  • Ah! Unfortunately there is no CSS magic going on, that's just what text inputs look like in Chrome. – Zack The Human Feb 22 '09 at 10:02
  • Oh, man. Of course. They use the browser's native styles. Which apparently doesn't show up in Firebug. Probably I could find them in chrome.css, tho. Ha. Thanks! – picardo Feb 22 '09 at 10:09
2

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

cletus
  • 616,129
  • 168
  • 910
  • 942
  • Thanks for the reply, but I am trying to learn the technique they used to create the border effect. – picardo Feb 22 '09 at 09:59
  • I'm not sure what you're seeing, but I'm seeing a plain vanilla text box. – cletus Feb 22 '09 at 10:00
  • 1
    Anyway that's what we're trying to tell you: there's nothing special about it. Anything special you're seeing is either the result of your OS, your browser, a plug-in of some description or, well, your imagination. – cletus Feb 22 '09 at 10:08
2

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;
}
roman m
  • 26,012
  • 31
  • 101
  • 133
  • Here's a useful link for using this CSS with IE: http://cf-bill.blogspot.com/2005/05/styling-all-input-typetext-webpage.html – Gavin Miller Feb 26 '09 at 18:52
0

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.

hadith
  • 1
0

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

Barbaros Alp
  • 6,405
  • 8
  • 47
  • 61
0

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.

Jason Plank
  • 2,336
  • 5
  • 31
  • 40