CODEWITHSUNDEEP
htmlcss
Jay Khan
Jay Khan

Reputation: 13

Issue with html body background

There is a white strip where I put the (google custom sesrch) search results rendering tag gcse:searchresults-only

if I remove cse id from var cx or remove the above tag it work fine and the white stripe vanishes

Screen shot https://i.sstatic.net/W3x2B.png

How shoud I remove this? Please help

Here is part of the code.

body {
  background: grey;
}
<form action="#">
  <input type="search" name="q" />
  <input type="Submit">
</form>

<script>
  (function() {
    var cx = '017892367244882832713:c64hvc3mwtu';
    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);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Upvotes: 0

Views: 23

Answers (1)

Pete
Pete

Reputation: 58432

The script is creating a div with a class of gsc-control-cse which is styled to be white. Just override the style:

body {
  background: grey;
}

.gsc-control-cse {
  /* ok to use important here as overriding third party styles */
  background: grey !important;
  border-color: grey !important;
}
<form action="#">
  <input type="search" name="q" />
  <input type="Submit">
</form>

<script>
  (function() {
    var cx = '017892367244882832713:c64hvc3mwtu';
    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);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

A little tip for you - you can right click on things and select inspect element, it will open up some developer tools which will show you what classes and styles are applied to the element you are inspecting

Upvotes: 1

Related Questions