0

Repro steps:

  1. Open this link
  2. Inspect Element on the magnifying glass to the right of the search bar
  3. See that some properties are inherited from a stylesheet named default.css
  4. View Source on the page
  5. ctrl+F "deafult.css"
  6. Phrase not found
  7. Open every JavaScript file to look for it (You don't have to bother doing this. Trust me that I already did it.)

Where is default.css? I know it's found here, but where is it being referenced on RMC's site?

Failed Web Dev
  • 33
  • 4
  • I'd hazard a guess it's the default CSS, located on your system; probably in the same root folder as your browser's `.exe`. – David Thomas Feb 05 '15 at 19:26
  • Its coming from your custom google searchbox – Hareesh Feb 05 '15 at 19:29
  • if you look in the browser inspector, you can see that `https://www.google.com/cse/style/look/v2/default.css` is being pulled from Google's Search Engine CSS.. it is the last CSS file loaded on the page. Also see https://www.google.com/cse/ – Jonathan Marzullo Feb 05 '15 at 19:31
  • I'm voting to close this question as off-topic because it doesn't seem to be a programming problem; I'm not entirely sure what kind of problem it might be, though. – David Thomas Feb 05 '15 at 23:35

3 Answers3

1

Looking at the code I see the class name .gsc-search-box then i did a google search for that class name and found this SO question. That lead me to find the Google custom search box which you can read more about here: https://www.google.com/cse/

Community
  • 1
  • 1
crazymatt
  • 3,266
  • 1
  • 25
  • 41
1

It is from Googles Custom Search Engine CSS.

The description of this product is located here

David Barker
  • 14,484
  • 3
  • 48
  • 77
1

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:

enter image description here

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>
h2ooooooo
  • 39,111
  • 8
  • 68
  • 102