Customizing design of Google Custom Search Box using css

Customizing design of Google Custom Search Box using css

7 min. read

Watch easy YouTube video tutorial

What is Google Custom Search?

As defined in Google Custom Search Docs →

Google Custom Search enables you to create a search engine for your website, your blog, or a collection of websites. You can configure your search engine to search both web pages and images. You can fine-tune the ranking, customize the look and feel of the search results, and invite your friends or trusted users to help you build your custom search engine.

Learn more at custom search docs.

The default look of Google Custom Search Box is not that much pretty, so we will be writing our own CSS rules to give it new fresh looks.

Default look :

Google Custom Search default design

HTML markup

<div id="search-box">
   <script>
     (function() {
	   var cx = "your cx id";
	   var gcse = document.createElement("script");
	   gcse.type = "text/javascript";
	   gcse.async = true;
	   gcse.src = "https://cse.google.com/cse.js?cx=" + cx;
	   var s = document.getElementsByTagName("script")[0];
	   s.parentNode.insertBefore(gcse, s);
     })();
     window.onload = function()
     { 
	   var searchBox =  document.getElementById("gsc-i-id1");
	   searchBox.placeholder="Search webslake";
	   searchBox.title="Search webslake"; 
     }
   </script>
   <gcse:search></gcse:search>
</div>

"Custom Search" is the default placeholder text of Google Custom Search Box, to modify it the following javascript code is added in html markup with the original Google Custom Search javascript code.

window.onload = function()
{ 	
	var searchBox =  document.getElementById("gsc-i-id1");
	searchBox.placeholder="Search webslake";
	searchBox.title="Search webslake";
}

In the html code you have to use your cx id and your domain name for placeholder & title values.

CSS rules

Applying basic CSS rules to Google Custom Search Box

.gsc-control-cse
{
	padding:0px !important;
	border-width:0px !important;
}

form.gsc-search-box,table.gsc-search-box
{
	margin-bottom:0px !important;
}

.gsc-search-box .gsc-input
{
	padding:0px 4px 0px 6px !important;
}

#gsc-iw-id1
{
        height: auto !important;
        padding: 0px !important;
        border-width: 0px !important;
        box-shadow:none !important;
}

#gs_tti50
{
	padding:0px !important;
}

#gsc-i-id1
{
	height:33px !important;
	padding:0px !important;
	background:none !important;
	text-indent:0px !important;
}

.gsib_b
{
	display:none;
}

button.gsc-search-button
{
        display:block;
        width:13px !important;
        height:13px !important;
        border-width:0px !important;
        margin:0px !important;
        padding: 10px 6px 10px 13px !important;
        outline:none;
        cursor:pointer;
        box-shadow:none !important;
        box-sizing: content-box !important;
}

.gsc-branding
{
	display:none !important;
}

.gsc-control-cse,#gsc-iw-id1
{
	background-color:transparent !important;
}

Assuming you are using one Google Custom Search Box per page the above CSS rules are fine as #gsc-iw-id1, #gs_tti50 & #gsc-i-id1 are ids of elements in the first Google Custom Search Box.

If there is another Google Custom Search Box in the same page then the corresponding ids of elements will be #gsc-iw-id2, #gs_tti51 & #gsc-i-id2

So you will have to update some of the above CSS rules

  1. #gsc-iw-id1 will be updated to → #gsc-iw-id1,#gsc-iw-id2

  2. #gs_tti50 will be updated to → #gs_tti50,#gs_tti51

  3. #gsc-i-id1 will be updated to → #gsc-i-id1,#gsc-i-id2

Creating the first design

Below are the additional CSS rules for the first design

/* Changing placeholder color of search box */
		
#gsc-i-id1::-webkit-input-placeholder
{ 
	/* Chrome */
	color: #FFF;
}

#gsc-i-id1:-ms-input-placeholder
{ 
	/* IE 10+ */
	color: #FFF;
}

#gsc-i-id1::-moz-placeholder
{ 
	/* Firefox 19+ */
	color: #FFF;
	opacity: 1;
}

#gsc-i-id1:-moz-placeholder
{ 
	/* Firefox 4 - 18 */
	color: #FFF;
	opacity: 1;
}

#search-box
{
	width:400px;
	height:33px;
	margin:0 auto;
	background-color: #0085cc;
	border-radius: 2px;
	padding: 5px 9px;
}

button.gsc-search-button
{
	border-left: 1px solid #0173af !important;
	background-color:transparent !important;
}

#gsc-i-id1
{
	color:#FFF;
}

Applying basic CSS rules and CSS rules specific to the first design redesigns the Google Custom Search Box like the image below

First design for Google Custom Search Box

Creating the second design

Additional CSS rules for the second design

/* Changing placeholder color of search box */
		
#gsc-i-id1::-webkit-input-placeholder
{ 
	/* Chrome */
	color: #FFF;
}

#gsc-i-id1:-ms-input-placeholder
{ 
	/* IE 10+ */
	color: #FFF;
}

#gsc-i-id1::-moz-placeholder
{ 
	/* Firefox 19+ */
	color: #FFF;
	opacity: 1;
}

#gsc-i-id1:-moz-placeholder
{ 
	/* Firefox 4 - 18 */
	color: #FFF;
	opacity: 1;
}

#search-box
{
	width:400px;
	height: 33px;
	margin:0 auto;
	background-color: #038860;
	padding: 3px 4px;
	border: 2px solid #FFF;
	box-shadow: 0px 0px 0px 2px #038860;
	border-radius: 40px;
}

#gsc-i-id1
{
	color:#FFF;
}

button.gsc-search-button
{
	padding:10px !important;
	background-color:transparent !important;
}

Applying basic CSS rules and CSS rules specific to the second design redesigns the Google Custom Search Box like the image below

Second design for Google Custom Search Box

Creating the third design

Additional CSS rules for the third design

#search-box
{
	width:400px;
	height: 33px;
	margin:0 auto;
	background-color: #FFF;
	padding: 3px;
	border: 2px solid #000;
	border-radius: 4px;
}

#gsc-i-id1
{
	color:#000;
}

button.gsc-search-button
{
	padding:10px !important;
	background-color: #000 !important;
	border-radius: 3px !important;
}

Applying basic CSS rules and CSS rules specific to the third design redesigns the Google Custom Search Box like the image below

Third design for Google Custom Search Box

Creating the fourth design

Additional CSS rules for the fourth design

#search-box
{
	width:400px;
	height: 43px;
	margin:0 auto;
	border-radius: 40px;
	overflow: hidden;
}

.gsc-search-box .gsc-input
{
	border: 2px solid #af111c;
	border-right-width: 0px;
	border-radius: 40px 0px 0px 40px;
	padding: 2px 12px !important;
}

#gsc-i-id1
{
	color:#000;
}

button.gsc-search-button
{
	padding: 15px !important;
	background-color: #af111c !important;
}

Applying basic CSS rules and CSS rules specific to the fourth design redesigns the Google Custom Search Box like the image below

Fourth design for Google Custom Search Box

Creating the fifth design

Additional CSS rules for the fifth design

/* CSS for changing placeholder color on search input box */
			
#gsc-i-id1::-webkit-input-placeholder
{ 
	/* Chrome */
	color: #FFF;
}

#gsc-i-id1:-ms-input-placeholder
{ 
	/* IE 10+ */
	color: #FFF;
}

#gsc-i-id1::-moz-placeholder
{ 
	/* Firefox 19+ */
	color: #FFF;
	opacity: 1;
}

#gsc-i-id1:-moz-placeholder
{ 
	/* Firefox 4 - 18 */
	color: #FFF;
	opacity: 1;
}

#search-box
{
	width: 400px;
	height: 43px;
	margin: 0 auto;
	background-color: #d87d00;
	border-radius: 2px;
	overflow: hidden;
}

.gsc-search-box .gsc-input
{
	padding:0px 13px !important;
}

#gsc-i-id1
{
	color:#FFF;
}

button.gsc-search-button
{
	padding:15px !important;
	background-color: #c67300 !important;
}

Applying basic CSS rules and CSS rules specific to the fifth design redesigns the Google Custom Search Box like the image below

Fifth design for Google Custom Search Box

Experiment with the CSS rules and make the design of Google Custom Search Box matching with your website user interface.

Write comments