How To Add Custom Google Search Box In Blogger

Google Custom Search is one of those tools whose list of Plus points is nearly endless. From providing super relevant search results  to options for On-Demand Indexing. GCS is a boon for all Blog and Website Owners.But the one thing that doesn't fit in place is its exceedingly over simple Search Form ,that again with Google Watermark. In this post I will be telling you how to change the Look of your GC Search Box with a CSS3 search Box.






I am assuming that you have already setup your Google Search Custom search engine if you haven't then check this tutorial. There are many variations GCS but normally the code contains a <script> tag , and it looks something like this:

01	<div id="cse" style="width: 100%;">Loading</div>

02	<script src="http://www.google.com/jsapi" type="text/javascript"></script>

03	<script type="text/javascript">

04	google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});

05	google.setOnLoadCallback(function() {

06	var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');

07	customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);

08	customSearchControl.draw('cse');

09

}, true);

10

</script>

Here you can't really see where to apply the styling. Now the following code also works the same way as the above Code, only thing is that it is easy to Customize :

1	<form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown">

2	<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>

3	<input value="FORID:11" name="cof" type="hidden"/>

4	<input id="q" style="width:150px;" name="q" size="70" type="text" />

5	<input value="Search" name="sa" type="submit"/>

6

</form>

In the id "searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" , XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY is your "Search engine unique ID" which you can find on the Control panel of your search engine.

If you are using the Adsense linked GCS then your search Box should look something like this:

01	<form action="URL of the page where the Result open id="cse-search-box">

02

<div>

03	<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" />

04	<input type="hidden" name="cof" value="FORID:10" />

05	<input type="hidden" name="ie" value="ISO-8859-1" />

06	<input type="text" name="q" size="21"  />

07	<input type="submit" name="sa" value="Search"  />

08

</div>

09

</form>

10	<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

(If you want to remove the default styling then exclude the script tag above and also remove id="cse-search-box" from the 1st Line)

How to Add it To Blogger:

Please Back Up Your Template Before You Make Changes 


1.In Your Blogger Dashboard Click Design > Edit Html 




2. Find the following piece of code : (Press Ctrl+F for a search bar to help find the code ) 


]]></b:skin>


3. Copy and Paste any one of the CSS code that you like from below Directly Above / Before   ]]></b:skin> .

4. Now go to Design > Page Elements and add the corresponding Search Box code into the Sidebar,etc

Note:Make sure to insert your own "Search engine unique ID" for the Search box to work.

In this tutorial I will implement 6 different CSS3 Search boxes. Don't Forget to check Part 2 of this series Now lets get started:

First:

This Search box is created by Catalin Rosu and you can check out the original tutorial Here.

Now the CSS markup for this search box 

01	#searchbox{

02	background: #eaf8fc;

03	background-image: -moz-linear-gradient(#fff, #d4e8ec);

04	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));

05	-moz-border-radius: 35px;

06	border-radius: 35px;

07	border-width: 1px;

08	border-style: solid;

09	border-color: #c4d9df #a4c3ca #83afb7;

10	width: 250px;

11	height: 35px;

12	padding: 10px;

13	margin: 10px auto 10px;

14	overflow: hidden;

15

}

16	#search, #submit

17

{

18	float: left;

19

}

20

#search

21

{

22	padding: 5px 9px;

23	height: 23px;

24	width: 380px;

25	border: 1px solid #a4c3ca;

26	font: normal 13px 'trebuchet MS', arial, helvetica;

27	background: #f1f1f1;

28	-moz-border-radius: 50px 3px 3px 50px;

29	border-radius: 50px 3px 3px 50px;

30	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

31	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

32	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

33

}

34

#submit

35

{

36	background: #6cbb6b;

37	background-image: -moz-linear-gradient(#95d788, #6cbb6b);

38	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));

39	-moz-border-radius: 3px 50px 50px 3px;

40	border-radius: 3px 50px 50px 3px;

41	border-width: 1px;

42	border-style: solid;

43	border-color: #7eba7c #578e57 #447d43;

44	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

45	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

46	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

47	height: 35px;

48	margin: 0 0 0 10px;

49	padding: 0;

50	width: 70px;

51	cursor: pointer;

52	font: bold 14px Arial, Helvetica;

53	color: #23441e;

54	text-shadow: 0 1px 0 rgba(255,255,255,0.5);

55

}

56	#submit:hover

57

{

58	background: #95d788;

59	background-image: -moz-linear-gradient(#6cbb6b, #95d788);

60	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));

61

}

62	#submit:active

63

{

64	background: #95d788;

65	outline: none;

66

67	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

68	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

69	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

70

}

71

72	#submit::-moz-focus-inner

73

{

74	border: none;

75

}

76

77	/* ----------------------- */

78

79	#search::-webkit-input-placeholder {

80	color: #9c9c9c;

81	font-style: italic;

82

}

83

84	#search:-moz-placeholder {

85	color: #9c9c9c;

86	font-style: italic;

87

}

88

89	#search.placeholder {

90	color: #9c9c9c !important;

91	font-style: italic;

92

}

93

94	#search:focus

95

{

96	border-color: #8badb4;

97	background: #fff;

98	outline: none;

99

}

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

1	<form id="searchbox" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown">

2	<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>

3	<input value="FORID:11" name="cof" type="hidden"/>

4	<input id="q" style="width:150px;" name="q" size="70" type="text" id="search" placeholder="Type here"  />

5	<input value="Search" name="sa" type="submit" id="submit" />

6

</form>

In 1st Line I added a Id="searchbox", this applies the external rounded edges to the box
In 4th Line I added id="search" & placeholder="Type here" ,Here placeholder is the text which appears if Search box is empty.This applies the  rounded edges to the Text Field
In the 5th Line I added id="submit". This is related to the Button Styling

Second:

This Search box is created by Nick La and you can check out the original tutorial Here.

Now the CSS markup for this search box 

01	/* search form

02	-------------------------------------- */

03	.searchform {

04	display: inline-block;

05	zoom: 1; /* ie7 hack for display:inline-block */

06	*display: inline;

07	border: solid 1px #d2d2d2;

08	padding: 3px 5px;

09

10	-webkit-border-radius: 2em;

11	-moz-border-radius: 2em;

12	border-radius: 2em;

13

14	-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);

15	-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);

16	box-shadow: 0 1px 0px rgba(0,0,0,.1);

17

18	background: #f1f1f1;

19	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

20	background: -moz-linear-gradient(top,  #fff,  #ededed);

21	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */

22	-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */

23

}

24	.searchform input {

25	font: normal 12px/100% Arial, Helvetica, sans-serif;

26

}

27	.searchform .searchfield {

28	background: #fff;

29	padding: 6px 6px 6px 8px;

30	width: 202px;

31	border: solid 1px #bcbbbb;

32	outline: none;

33

34	-webkit-border-radius: 2em;

35	-moz-border-radius: 2em;

36	border-radius: 2em;

37

38	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

39	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

40	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

41

}

42	.searchform .searchbutton {

43	color: #fff;

44	border: solid 1px #494949;

45	font-size: 11px;

46	height: 27px;

47	width: 27px;

48	text-shadow: 0 1px 1px rgba(0,0,0,.6);

49

50	-webkit-border-radius: 2em;

51	-moz-border-radius: 2em;

52	border-radius: 2em;

53

54	background: #5f5f5f;

55	background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));

56	background: -moz-linear-gradient(top,  #9e9e9e,  #454545);

57	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */

58	-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */

59

}

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

1	<form class="searchform" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL Of the Page Where the Result Appear">

2	<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>

3	<input value="FORID:11" name="cof" type="hidden"/>

4	<input  id="q" style="width:150px;" name="q" size="70" type="text" class="searchfield" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />

5	<input name="sa" class="searchbutton" value="&rArr;" type="submit"  />

6

</form>

In 1st Line I added class="searchform" which applies the Search box styling.
In 4th Line I added class="searchfield" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" , which applies styling to the Text Field and also tells which text has to be shown when Search Field is empty
In 5th Line I added class="searchbutton" which applies the styling to the Button

Third:

This Search box is created by Cameron Baney and you can check out the original tutorial Here.

Now the CSS markup for this search box

001	#search-form {

002	background: #e1e1e1; /* Fallback color for non-css3 browsers */

003	width: 365px;

004

005	/* Gradients */

006	background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));

007	background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

008

009	/* Rounded Corners */

010	border-radius: 17px;

011	-webkit-border-radius: 17px;

012	-moz-border-radius: 17px;

013

014	/* Shadows */

015	box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

016	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

017	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

018

}

019

020	/*** TEXT BOX ***/

021	input[type="text"]{

022	background: #fafafa; /* Fallback color for non-css3 browsers */

023

024	/* Gradients */

025	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));

026	background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

027

028	border: 0;

029	border-bottom: 1px solid #fff;

030	border-right: 1px solid rgba(255,255,255,.8);

031	font-size: 16px;

032	margin: 4px;

033	padding: 5px;

034	width: 250px;

035

036	/* Rounded Corners */

037	border-radius: 17px;

038	-webkit-border-radius: 17px;

039	-moz-border-radius: 17px;

040

041	/* Shadows */

042	box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

043	-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

044	-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

045

}

046

047	/*** USER IS FOCUSED ON TEXT BOX ***/

048	input[type="text"]:focus{

049	outline: none;

050	background: #fff; /* Fallback color for non-css3 browsers */

051

052	/* Gradients */

053	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));

054	background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);

055

}

056

057	/*** SEARCH BUTTON ***/

058	input[type="submit"]{

059	background: #44921f;/* Fallback color for non-css3 browsers */

060

061	/* Gradients */

062	background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));

063	background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

064

065	border: 0;

066	color: #eee;

067	cursor: pointer;

068	float: right;

069	font: 16px Arial, Helvetica, sans-serif;

070	font-weight: bold;

071	height: 30px;

072	margin: 4px 4px 0;

073	text-shadow: 0 -1px 0 rgba(0,0,0,.3);

074	width: 84px;

075	outline: none;

076

077	/* Rounded Corners */

078	border-radius: 30px;

079	-webkit-border-radius: 30px;

080	-moz-border-radius: 30px;

081

082	/* Shadows */

083	box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);

084	-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);

085	-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);

086

}

087	/*** SEARCH BUTTON HOVER ***/

088	input[type="submit"]:hover {

089	background: #4ea923; /* Fallback color for non-css3 browsers */

090

091	/* Gradients */

092	background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));

093	background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);

094

}

095	input[type="submit"]:active {

096	background: #4ea923; /* Fallback color for non-css3 browsers */

097

098	/* Gradients */

099	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));

100	background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);

101

}

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

1	<form id="search-form" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL Of the Page Where the Result Appear">

2	<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>

3	<input value="FORID:11" name="cof" type="hidden"/>

4	<input  id="q" name="q" size="70" type="text" />

5	<input name="sa" type="submit"  value="Search" />

6

</form>

Just added id="search-form" in the 1st Line and the rest of the styling is automatic.

Fourth:

This Search box is created by Soh Tanaka and you can check out the original tutorial Here.

Now the CSS markup for this search box

01	<style>fieldset.search {

02	border: none;

03	width: 243px;

04	margin: 0 auto;

05	background: #222;

06

}

07	.search input, .search button {

08	border: none;

09	float: left;

10

}

11	.search input.box {

12	color: #fff;

13	font-size: 1.2em;

14	width: 190px;

15	height: 30px;

16	padding: 8px 5px 0;

17	background: #616161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64DSd1TDv5XXAOnGHopphpE3eZxz7gzqjp8Sqq3-vpkwAtmSuJ_Hut-amg2UqP3zANPBsM70Ei9UQgN40sZt6aKpC6Kao06wnu_aHUEqdcsAIedAfQKV9punsbpNw1uFfMiVDjNGgx_35/s1600/search_bg.gif) no-repeat;

18	margin-right: 5px;

19

}

20	.search input.box:focus {

21	background: #616161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64DSd1TDv5XXAOnGHopphpE3eZxz7gzqjp8Sqq3-vpkwAtmSuJ_Hut-amg2UqP3zANPBsM70Ei9UQgN40sZt6aKpC6Kao06wnu_aHUEqdcsAIedAfQKV9punsbpNw1uFfMiVDjNGgx_35/s1600/search_bg.gif) no-repeat left -38px;

22	outline: none;

23

}

24	.search button.btn {

25	width: 38px;

26	height: 38px;

27	cursor: pointer;

28	text-indent: -9999px;

29	background: #fbc900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64DSd1TDv5XXAOnGHopphpE3eZxz7gzqjp8Sqq3-vpkwAtmSuJ_Hut-amg2UqP3zANPBsM70Ei9UQgN40sZt6aKpC6Kao06wnu_aHUEqdcsAIedAfQKV9punsbpNw1uFfMiVDjNGgx_35/s1600/search_bg.gif) no-repeat top right;

30

}

31	.search button.btn:hover {

32	background: #fbc900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64DSd1TDv5XXAOnGHopphpE3eZxz7gzqjp8Sqq3-vpkwAtmSuJ_Hut-amg2UqP3zANPBsM70Ei9UQgN40sZt6aKpC6Kao06wnu_aHUEqdcsAIedAfQKV9punsbpNw1uFfMiVDjNGgx_35/s1600/search_bg.gif) no-repeat bottom right;

33

}</style>

34	<!--[if lte IE 7]>

35

<style>

36	.search input.box {

37	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4o2JlNtQXBmxYGZO2OSCy2dAG8qebEkrU14ywZs8jkiyxyldutstMbikPUflo4uIi942aRU6Wo5WXBMc9bCjNB0Bv1EkSRHmpPkrp2ckyLhvE7w-I_FeEEyYoHAspSqYTcCNNfzok1S9/s1600/search_bg_ie.gif) no-repeat right bottom;

38

}

39

</style>

40	<![endif]-->

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

1	<form id="searchform" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL Of the Page Where the Result Appear">

2	<fieldset class="search">

3	<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>

4	<input value="FORID:11" name="cof" type="hidden"/>

5	<input  id="q" name="q" size="70" type="text" class="box" />

6	<button class="btn" type="submit" title="Submit Search">Search</button>

7	</fieldset>

8

</form>

In the 1st Line added id="searchform" ,and then added a fieldset tag in between starting and ending of form tag.
In the 4th line added class="box" ,to apply styling to the box
The 5th Line is totally different for the functioning of this Search.(type="submit" is necessary )

Fifth:

This Search box is created by Bharani M and you can check out the original tutorial Here.

Now the CSS markup for this search box

01

#main {

02	width: 400px;

03	height: 50px;

04	background: #f2f2f2;

05	padding: 6px 10px;

06	border: 1px solid #b5b5b5;

07

08	-moz-border-radius: 5px;

09	-webkit-border-radius: 5px;

10	border-radius: 5px;

11

12	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;

13	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;

14	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;

15

}

16

17	input[type="text"] {

18	float: left;

19	width: 230px;

20	padding: 15px 5px 5px 5px;

21	margin-top: 5px;

22	margin-left: 3px;

23	border: 1px solid #999999;

24

25	-moz-border-radius: 5px;

26	-webkit-border-radius: 5px;

27	border-radius: 5px;

28

29	-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;

30	-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;

31	box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;

32

}

33

34	input[type="submit"].solid {

35	float: left;

36	cursor: pointer;

37	width: 130px;

38	padding: 8px 6px;

39	margin-left: 20px;

40	background-color: #f8b838;

41	color: rgba(134, 79, 11, 0.8);

42	text-transform: uppercase;

43	font-weight: bold;

44	border: 1px solid #99631d;

45

46	-moz-border-radius: 5px;

47	-webkit-border-radius: 5px;

48	border-radius: 5px;

49

50	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);

51

52	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;

53	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;

54	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;

55

56	-webkit-transition: background 0.2s ease-out;

57

}

58

59	input[type="submit"].solid:hover, input[type="submit"].solid:focus {

60	background: #ffd842;

61

62	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;

63	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;

64	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;

65

}

66

67	input[type="submit"].solid:active {

68	background: #f6a000;

69	position: relative;

70

top: 5px;

71	border: 1px solid #702d00;

72

73	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;

74	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;

75	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;

76

}

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

01	<section id="wrapper">

02	<div id="main">

03	<form  id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL Of the Page Where the Result Appear">

04	<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>

05	<input value="FORID:11" name="cof" type="hidden"/>

06	<input  id="q" name="q" size="70" type="text" id="search" />

07	<input name="sa" type="submit" class="solid" />

08

</form>

09

</div>

10	</section>

Firstly wrapped the form tag in between a section and div tag and also added a id="search" in the 6th Line and class="solid" in the 7th line.

Sixth:

This Search box is created by Rethnaraj Rambabu and you can check out the original tutorial Here.

Now the CSS markup for this search box

01

#search {

02

03

}

04

05	#search input[type="text"] {

06	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXYV1ego0Qa7z99UmWX0KLWWnvJXUb8ksyOMkw4pHQLGb4qbfWSR0tRicCULkidARXy8_IQuHMQt58050F0kAj8ivRycCdQENQy-e8w61Cn1uWniRb-wrAHWo46ZQimnY67NA4kEQbzYZy/s1600/search-white.png) no-repeat 10px 6px #444;

07	border: 0 none;

08	font: bold 12px Arial,Helvetica,Sans-serif;

09	color: #d7d7d7;

10	width:150px;

11	padding: 6px 15px 6px 35px;

12	-webkit-border-radius: 20px;

13	-moz-border-radius: 20px;

14	border-radius: 20px;

15	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

16	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

17	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

18	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

19	-webkit-transition: all 0.7s ease 0s;

20	-moz-transition: all 0.7s ease 0s;

21	-o-transition: all 0.7s ease 0s;

22	transition: all 0.7s ease 0s;

23

}

24

25	#search input[type="text"]:focus {

26	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOeKstsBa_yzFiaRA8JRctgkUmCLXYKEcm_xkS-9MysRTi5Dkdzq-Mpeopvwd5llZkqfvp0C9sG3vjRL-XV6Wc9jyyht-iV3WpDtopspEhat1lsjhTkzjP8Fqxc73-1rm9VAccXfxO1g8R/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;

27	color: #6a6f75;

28	width: 200px;

29	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

30	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

31	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

32	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

33

}

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

1	<form  id="search" method="get" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where Result has to be Shown">

2	<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>

3	<input value="FORID:11" name="cof" type="hidden"/>

4	<input  id="q" name="q" size="70" type="text"  placeholder="Search..." />

5

</form>

This is a little differently done, see the button code has been deleted and in-place a method="get" tag has been introduced. 

Having problems ,please feel free to ask

See Original Post at : stylifyyourblog