CODEWITHSUNDEEP
javascripthtmlcss
DarkGuy10
DarkGuy10

Reputation: 55

How can I style the Google custom search box

I want to have a site search, I am using google custom search, but it has its own style. I want to change the style of the search box using CSS.

Please no AJAX & no jQuery.

JavaScript:

(function() {
    var cx = 'myID';
    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);
})();

HTML:

<gcse:search></gcse:search>

I want sth like : www.w3schools.com

Upvotes: 0

Views: 2457

Answers (1)

Giorgos Georgantas
Giorgos Georgantas

Reputation: 72

You can use DOM inspection tool right click on the search bar and inspect element . And you can determine the IDs and classes and the default styles . Next, you can make your own css rules which will override the default ones try the css code like this :

input.gsc-input {}
input.gsc-search-button {}
form.gsc-search-box {}
div.gsc-control-cse {}

Upvotes: 1

Related Questions