Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Style Google Custom Search Manually using CSS ?

Improve Article
Save Article
  • Last Updated : 07 Dec, 2022
Improve Article
Save Article

Many users or developers want to use built-in and/or custom search instead of Google’s Custom Search Engine (GCSE) for searching through their content. Because it’s much less work, and most often it does the trick. But if you don’t want to use advanced filters or custom search parameters then GCSE is good for you.

In this article, I will show you how to create a custom search form and a results box which allows for more control and a cleaner way to style the search input field.

Problem Statement: Usually adding GCSE to your site is as simple as copy-pasting a script and a custom HTML tag into your site, but the problem is that “How can we change the placeholder of the GCSE input field?”. Unfortunately very often the answer is an unreliable setTimeout method. This is not useful because setTimeout waits for the Ajax call from the GCSE to complete and then changes attributes via JavaScript.

In this method, instead of doing a blind setTimeout(), we are going to query the element and change the attributes with JS and use the callback provided by the GCSE. It will guarantee that the input has already been loaded.

Implementation of Custom search engine: Follow the steps to create a Custom search engine:

Step 1: Create a GCSE account. The search engine is configured completely online. To create an account, go to the GCSE site and click the Add button. Fill out this form by adding your site URL. You can avoid advanced options, and only set primary utilities.

After clicking add button you will get this form. Fill this form with your website URL and name as shown below:

GCSE form

After filling out the form you will get the search engine id and code.

 

Step 2: When you click done, you are presented with three options, First is to click on Get Code, which will help you to copy the code for the search bar to show on your site.

Get Code 

The second is the Public URL that tells you the address of your search engine. 

Public URL 

Step 3: The last is Control Panel. You get the GCSE Id here. Go to the Control Panel, copy the Search Engine ID and save it on your notepad. 

Search Engine ID 

Step 4: Write the code for searching:

  • index.html: First, we need to create a basic index.html for displaying the search bar. We create a basic HTML file and code that is copied from the GCSE account. It shows a search bar.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Styling Google Custom Search Box</title>
    <link rel="stylesheet" href="style.css"
          type="text/css" media="all" />
    <script src="script.js"></script>
</head>
<body>
    <h1 style="color:green">GFG custom search engine</h1>
    <script async src="https://cse.google.com/cse.js?
                       cx= 210b06286d70b46c7">
    </script>
    <div class="gcse-search"></div>
</body>
</html>


  • script.js: In index.html we will add JavaScript code for changing the placeholder of the search bar and for styling purposes. You can write JavaScript into index.html or make separate JavaScript files. In this example, we added JavaScript code into index.html.

Javascript




(function () {
    var cx = '210b06286d70b46c7';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol ==
        'https:' ? 'https:': 'http:') +
    '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();
window.onload = function () {
    var title = "Search Geeksforgeeks";
    var textBox = document.querySelector("#gsc-i-id1");
    var button = document.querySelector
    (".gsc-search-button-v2 svg title");
    textBox.placeholder = title;
    textBox.title = title;
    button.innerHTHL = title;
}


  • style.css: Using CSS, We will style the search bar manually.

CSS




body {
    margin: 10;
}
.gsc-control-cse {
    background-color: #387deb !important;
    border: 0 !important;
    padding: 6px 8px 6px 10px !important;
    margin: 0px;
    border-radius: 2px;
    overflow: hidden;
}
form.gsc-search-box,
table.gsc-search-box {
    margin-bottom: 0 !important;
}
.gcse-search-box {
    border: 0 !important;
    background: #387deb !important;
}
.gcse-search-box-tools .gcse-search-box .gcse-input {
    padding-right: 0 !important;
}
#gs_tti50 {
    padding: 6px 0 !important;
}
#gsc-i-id1 {
    color: #000 !important;
    text-indent: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background: none !important;
}
#gsc-i-id1::-webkit-input-placeholder {
    color: #000 !important;
}
#gsc-i-id1::-as-input-placeholder {
    color: #fff;
}
#gsc-i-id1::-moz-placeholder {
    color: #fff;
    opacity: 1;
}
#gsc-i-id1::-moz-placeholder {
    color: #fff;
    opacity: 1;
}
.gsib_b {
    display: none !important;
}
.gsc-search-button -v2 {
    padding: 7.5px !important;
    margin-left: !important;
    outline: none !important;
    border: !important;
    cursor: pointer;
}
.gsc-search-button-v2,gsc-search-button-v2: hover {
    cursor: pointer;
}
.gsc-search-button-v2,gsc-search-button-v2: hover {
    background-color: transparent !important;
    background-image: none !important;
}
.gsc-search-button -v2:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
}
.gsc-search-button -v2:focus {
    outline: none !important;
    box-shadow: none !important;
}


Output:

Google Custom Search with style Manually 

Conclusion: Using simple CSS we can style the search bar quickly, if the site is static HTML, then Google Custom Search Engine works perfectly. With adding some JavaScript code, it’s possible to customize the search bar.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!