CODEWITHSUNDEEP
javascripthtmlcss
harsher
harsher

Reputation: 57

How to make Background of Google Custom Search Engine (Transparent)?

By default the background appears as white. Is it possible by any means to change it's background color to transparent..? 

<script>
  (function() {
    var cx = '005519348941191855053:d0uziw7c2dq';
    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:search></gcse:search>

Image of Google CSE(white background)

Upvotes: 0

Views: 680

Answers (1)

Adam Azad
Adam Azad

Reputation: 11297

If you want to make the container transparent. You can always inspect the output of Google's script, and add customize it through CSS. You can target .gsc-control-cse with !important

body {
  background:#f44336;
}
.gsc-control-cse {
  background:transparent !important; /* enforce this rule; do not allow override */
  border-color:transparent !important; /* border color */
}
<script>
  (function() {
    var cx = '005519348941191855053:d0uziw7c2dq';
    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:search></gcse:search>

Upvotes: 1

Related Questions