How to desiign google search box

Hi guys,

I tried to copy the google search box but can not figure out which CSS should stay and which I need to remove…

can anyone help me with this?

or some one already have such code?

here is the link to that box (it’ snot on G homepage e, I like box on SERP):

tnx

You lost me there :slight_smile:

Can you clarify the question and perhaps link to the site you are coding.

I have attached an image…

I copied a copy of HTML, but G has bunch of CSS…

can not clean up CSS and keep only CSS needed to show exact the same search box as on Google:)

If You just want something like the google search styling then this is pretty close but you’d need the gradient image for the button.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.search {
    clear:both;
    width:100%;
    overflow:hidden;
    border:none
}
legend span {
    position:absolute;
    top:-999em;
    left:-999em
}
#search {
    background:#fff;
    color: silver;
    overflow: hidden;
    color: #000000;
    padding:2px 10px 2px 6px;
    width:650px;
}
.search input {
    border:1px solid #ccc;
    border-left:1px solid #999;
    border-bottom:1px solid #999;
    padding:2px 5px;
    font: 17px arial, sans-serif;
    float:left;
    line-height:26px;
    height:26px;
}
#go {
    background:#dfdfdf url(images/gradientbg.gif) repeat-x 0 0;/* add your gradient image here*/
    height:32px;
    border-left:none;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <fieldset class="search">
    <legend><span>Search</span></legend>
    <input type="text" name="search" id="search" value="Search" />
    <input type="submit" name="go" id="go" value="Search" />
    </fieldset>
</form>
</body>
</html>


Get yourself Firebug for Firefox and then you can inspect all the styles that apply to a certain element very easily.

Thanks Paul.
that’s what I wanted and could not figure out how to clean up CSS…
Thanks Again