Style Google Custom Search Box Using CSS

by
Style Google Custom Search Box Using CSS
Demo Download

In this tutorial, I will show you how to style a Google Custom Search box with CSS and HTML. We will use {a-gsc-i-id1} elements to design the search bar.

We know that the Google search field let you enable search engine for your blog, website or multiple websites. Not only this, you can configure your search engine for both web pages and images.

Furthermore, you can fine-tune the ranking and customize the look and feel of your website search result. This helps your site visitor to easily find important content over your website.

We know that the default Custom Google Search Box doesn’t look good and you surely want to customize it and style it to match with your website design.

If that is the case then there are few CSS rules require to implement to make it stylish. It’s not hard to do that and all we will apply some CSS and make it look fresh.

How to Design Google Custom Search Box with CSS

The first thing we need to paly with the default Google Search Bar CSS code. We will add define some custom variables that will help us to assign an ID, placeholder text and search box title. This is how our HTML/Javascript markup will look like.

Make sure to add your own partner pub ID in the var cx to make work the search box.

<div id="blue-searchbox">
   <script>
	 (function() {
	   var cx = "Add Your Partner Pub ID Here";
	   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 Codeconvey";
	   searchBox.title="Search Codeconvey"; 
	 }
   </script>
   <gcse:search></gcse:search>
</div>

The Google search bar “Custom Search” is the default placeholder text. To modify it, the following Javascript code is added in HTML markup with the original Google Custom Search javascript code.

{ 
   var searchBox =  document.getElementById("gsc-i-id1");
   searchBox.placeholder="Search Codeconvey";
   searchBox.title="Search Codeconvey"; 
 }

Apply CSS rules

Here the acutally magic will start. First, we will apply basic CSS rules to Google Custom Search Box.

/*General Style*/

.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;
}

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

But if you want to add more than one Google Search Input Field on the same page then the corresponding ids of elements will be #gsc-iw-id2, #gs_tti51 & #gsc-i-id2

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

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

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

After that, we will require to implement text color CSS rules for placeholder text.

/* 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;
}

Creating the Blue Design

After doing all this, now we need to play with the CSS search bar to make it look good and design it as we want. Below are the additional CSS rules to create the search bar in a nice-looking blue color.

/* Blue Box */
#blue-searchbox {
    max-width: 460px;
    height: 50px;
    margin: 0 auto;
    background-color: 
    #1821b5;
    border-radius: 3px;
    padding: 10px 12px;
}
#blue-searchboxbutton .gsc-search-button
{
	border-left: 1px solid #0173af !important;
	background-color:transparent !important;
}

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

Creating the Green Design

If you want to create green color design search box then here are the additional CSS rules

/* Green Box */
#green-searchbox {
	max-width: 460px;
	height: 50px;
	margin: 0 auto;
	background-color: #038860;
	padding: 8px 12px;
	border: 2px solid#FFF;
	box-shadow: 0px 0px 0px 2px #038860;
	border-radius: 50px;
}
#green-searchbox #gsc-i-id1
{
	color:#FFF;
}
#green-searchbox button.gsc-search-button
{
	padding:10px !important;
	background-color:transparent !important;
}

Creating the Black Design

Our third search box is design in black color so if you want to implement this one then the following additional CSS rules that you need to add into your stylesheet.

/* Black Flat */
#gray-searchbox
{
	max-width:460px;
	height: 50px;
	margin:0 auto;
	background-color: #606060;
	padding: 8px 12px;
	border: 2px solid #000;
}

#gray-searchbox #gsc-i-id1
{
	color:#fff;
}

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

Creating the Red Design

The red color always stands out your design and mostly likes to use to attract the user to click on it. Let’s have a look at the additional CSS rules that you need to add.

/* Red Box */
#red-searchbox
{
	max-width:460px;
	height: 50px;
	margin:0 auto;
	border-radius: 50px;
	overflow: hidden;
	box-sizing: border-box;
	border: 2px solid #af111c;
}

#red-searchbox .gsc-search-box .gsc-input
{
	border-radius: 40px 0px 0px 40px;
	padding: 2px 12px !important;
}

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

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

Creating the Purple Design

The last search box is designed in purple color which look really awesome. If you like that one then add the following additional CSS rules.

/* Purple Box */
#purple-searchbox
{
	max-width: 460px;
	height: 50px;
	margin: 0 auto;
	background-color: #9b0bf6;
	border-radius: 3px;
	overflow: hidden;
}

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

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

#purple-searchbox button.gsc-search-button
{
	padding:18px !important;
	background-color: #7608bc !important;
}

You can still play with any of the above designs and do experiments with the CSS rules. If you know CSS a little bit then I am sure you will make design easily. Let’s try and make the design of Google Custom Search Box matching with your website user interface.

 

You Might Be Interested In: