Posted on September 29, 2009 - by Dr. Div
How to Style Google Custom Search Field with CSS + Rounded Corners (curves)
The idea is simple: The Custom Search code that Google provides has this structure:
FIELD + BUTTON.
The only thing we are adding here is a DIV (leftCurve image) right before the field. So the structure becomes: DIV + FIELD + BUTTON. The rest is pure CSS.
For this example, I set the body background color to navy blue in order to display rounded corners (curves) properly. You can change this color to any color of your choice or you can experiment with transparent graphics if you prefer.
Please write a comment if you found this helpful or if you have any questions.
Dr.Div
CSS
#searchField #fieldContainer {
margin: 0px;
padding: 0px;
}
#searchField #fieldContainer #myField{
margin-left:-1px;
margin-top:-1px;
height:18px;
float: left;
width: 160px;
color: #666666;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-position: left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 3px 0px 0px 0px;
}
#searchField #fieldContainer #googleSearch{
height:20px;
width:auto;
overflow:hidden;
float:left;
}
#searchField #fieldContainer #leftCurve {
float: left;
background-image: url(bg_searchbar_left.gif);
background-repeat: no-repeat;
width:15px;
height:20px;
background-position: left top;
}
#searchField #fieldContainer #mySearch {
float: left;
background-image: url(bg_searchbar_right.gif);
background-repeat: no-repeat;
width:23px;
height:20px;
background-position: left top;
display:block;
margin-left:-1px;
text-indent:-999px;
overflow:hidden;
border:none;
color:#fff;
font-size:1px;
}
BODY
<body bgcolor="#1d4f6e">
<div id="searchField">
<div id="fieldContainer">
<div id="leftCurve"></div>
<form action="http://www.drdiv.com" id="cse-search-box">
<div id="googleSearch">
<input type="hidden" name="cx" value="yourcxvalue" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="myField"/>
<input type="image" src="bg_searchbar_right.gif" name="sa" value="Search" id="mySearch"/>
</div>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</form>
</div>
</div>
</body>
ROUNDED CORNERS
To download, right click on each image and select “Save Image As” or “Save As”. Make sure to save them with .gif extension.
Note: After you’re done with implementing this code, make sure to look at your original Google Custom Search code and add the correct website names and variables that are specific to your website.
Visit My Website
October 12, 2009
Permalink
If you’d like to remove the “Google Custom Search” watermark from the field, you can insert a blank value into the field, such as:
input type="text" name="q" id="myField" value=" "For your information, according to Google Custom Search Terms of Service 2.3, changing this background graphic is not allowed (http://www.google.com/cse/docs/tos.html).
Visit My Website
January 15, 2010
Permalink
THAAAAANK YOU!
Visit My Website
February 3, 2010
Permalink
You’re very welcome!
Visit My Website
February 19, 2010
Permalink
Thanks for the code. It is just what I was looking for. Are there any restrictions on re-using your code?
Visit My Website
February 19, 2010
Permalink
Glad it was helpful. Absolutely no restrictions. Helping out a fellow developer is my pleasure. Enjoy!