harsher harsher - 25 days ago 19
CSS Question

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)

Answer

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>

Comments