How to Customize Google Custom Search Engine Using CSS?

Do you know what is Google Custom Search Engine? Some months ago, Google had started new service that let users to create their own search engine that will only search a specific URL or multiple URLs according to users’ need. The process and steps for creating this search engine is so easy but customizing it is so difficult because Google has not given much options for customizing this search engines engine. They only given options like changing border color, changing background color and some others but not options like setting up hover effects, removing watermark, resizing search button and search box. Actually, we can do all these using CSS computer language. But in order to customize this Google Custom Search using CSS, we have to know the classes and ids that are used in this Google Custom Search Engine. And today, we are here to tell you how to customize Google Custom Search Engine using CSS with defining the ids and classes used in this Search Engine. So let’s start some learning more!

Classes and IDs of Google Custom Search Engine:

Here are the important class you should know in order to customize Google Custom Search Engine with CSS:

IDs (#) or Classes (.)	Definition
#___gcse_0	All Over Google Custom Search Engine process under this id.
.gsc-input-box	The class to customize search box of custom search engine.
.gsc-input-button	The class to customize search button of custom search engine.
.gsib_a	The class to customize inside search box
#gsc-i-id1	The class to customize the style of text or class to remove water mark.

How to Customize Google Custom Search Engine Now?

Now, we have learnt important ids and classes of this custom search engine. And now, this is the time to customize the Google Custom Search Engine using CSS.

Customization #1- How to Change Button Color, height, width?

Now, first let’s learn how to change button color, height or width using CSS.
To change button color, height, width, just play with CSS as following:

.gsc-input-button{
color: #000!important;
height: 30px!important;
width:50px!important;
}

And now, place it above ‘]]></b:skin>’ in your template and open your blog. You will see that the GSC’s button has changed color, height and width!

Customization #2- How to Change Search Box’s Width, Border Color and Height?

Now its time to customize search box’s width, border color and height. Use CSS as following:

.gsc-input-box{
width:100px!important;
border-color:#746534!important;
height:30px!important;
}

Save it! and it will get changed.

Customization #3- How to remove Google’s watermark using CSS?

Now, you are thinking that we are kidding. This is not possible. Right? But No! This is possible using CSS small code. Just with this:

#gsc-i-id1{
background:none!important;
}

Place it above ‘]]></b:skin>’ on your template and you will see that the watermark from search engine has been vanished!

Customization #4- How to add hover effect to Button?

Google not allow you to add hover effect on search button. But with CSS, it is possible. So whenever you want to add hover effect in the search button, use following CSS:

.gsc-input-button:hover {
  background: #FEBD17 url(http://www.google.com/uds/css/v2/search_box_icon.png)no-repeat!important;
  background-position: 20px!important;
  border-color: #FEBD17!important;
}

Change FEBD17 to change the color on hover and second FEBD17 to change the border color on hover and place it on your template. You will see hover effect on button!

Final Words from Author

I hope you liked this post because this is the one ‘n’ only post that teach you how to remove watermark from Google’s Custom Search Engine and also, how to customize this custom search engine using CSS. If you really liked this, then please share us on different social medias. Thanks!

Share this post