What is the CSS secret in the Google search box?

Question

I am learning the css methods that Google uses to create my own ui. I realized that the css code on their home page does not contain links to their search field; it only looks like a bare input tag, not a border, background image, or any conventions commonly used to style a border. And yet, it can display not only a hue and a kind of gradient, but also a little circular, and also responds to the focus of the cursor.

So your hunch is as good as mine. Please use your Firebug to test it and help me figure out this riddle.

http://www.google.com/

EDIT: To be clear, I'm not trying to make an aesthetic judgment. Although I think the minimalism of the Google homepage is fantastic, I’m really interested to know what methods they used to style the borders around the search box - without using any CSS.

Answer 1

Are you using mac Are not all user interface elements around that glow and change color?

Do you have any add-ons, such as the Google toolbar, that can change the user interface of the page if you cannot find it?

: , , CSS , . Google CSS, , , , . , Google Chrome:

ImageShack

Answer 2

. ... Google , .

Answer 3

, Gmail, CSS:

.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 4

Chrome, , .

Answer 5

, . , HTML- input. CSS.

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

It will just cover the search box field. If you need to close the button, just add the class to the 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 full control over any field inputon your site.

Answer 6

Now that any browser like firefox can read css3, you can use its angle radius, im using it now! although its not yet valid w3c.