Google Custom Search (Csev2) Help on Styling

How can I style the Google custom search box

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 {} 

Google CSE (Custom Search Engine) different search button and fields?

answer: choosing hide ads or not under the BUSINESS section in Google CSE admin page changes the 'looks' of the search field & submit button...

why that should affect the visual results, I have no clue.

please refer links for CSS and other simple styling ways used with Visual Studio c#

First of all, when you are beginning to use CSS you understand that browser compatibility is the main point. You can't only referer to CSS2 or CSS3 convention.
Take a look at quirkmode.

Then here come HTML Dog.

W3Schools is good for beginners but you'll quickly need more pro and detailed references. And at this point, it will depend on your needs.

Then you have to know some CSS tricks & hacks : https://stackoverflow.com/questions/500827/css-tips-which-every-beginning-developer-should-know-about.
Firebug is really our savior.

@media screen
{
div p.goodLuck:before
{
content: "Good luck !" // Don't work on IE (owwww noz, first compatiblity fail :D)
}
}

Where is this CSS file coming from?

The short answer:

It comes from this javascript file.

The longer answer:

If you look at your Google Chrome developer tools you'll see the following "initiator" column:

If you hover over the URL, you'll see the following:

google.(anonymous function).d   @    jsapi?autoload={"modules"%3A[{"name"%3A"search"%2C"version"%3A"1.0"%2C"callback"%3A"__gcse.scb"%2C"…:21
(anonymous function)            @    ?file=search&v=1.0&hl=en&async=2&style=https%3A%2F%2Fwww.google.com%2Fcse%2Fstyle%2Flook%2Fv2%2Fdef…:10

So essentially it's loaded by Google CSE's d function.

If we look closer at that we'll see:

google[z].d = function(a, b, c) {
            if (c) {
                var e;
                "script" == a ? (e = h.createElement("script"), e.type = "text/javascript", e.src = b) : "css" == a && (e = h.createElement("link"), e.type = "text/css", e.href = b, e.rel = "stylesheet");
                (a = h.getElementsByTagName("head")[0]) || (a = h.body.parentNode.appendChild(h.createElement("head")));
                a.appendChild(e)
            } else
                "script" == a ? h.write('<script src="' + b + '" type="text/javascript">\x3c/script>') : "css" == a && h.write('<link href="' + b + '" type="text/css" rel="stylesheet"></link>')
        };

Where it adds it to the header.

If we look at the (anonymous function) we'll find the following:

google.loader.writeLoadTag("css", "https://www.google.com/cse/style/look/v2/default.css", true);

Which is where it's coming from.

But where is CSE added?!

Right on the source of the HTML page you were looking at:

<script>
  (function() {
    var cx = '018180480343835782597:0w0lu0vrv_i';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

---

Related Topics