0

I've got this code from google but I'm unable to style it, I put new rule in my site's css but it doesn't listen to it and overrides it with google's default, what can I do with it to make it look as I want it to instead of how google planned it?

That's my css that gets ignored 

.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent;
  border: none;
  width: 280px;
}

and that's the google cse code 

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

2 Answers2

0

Try adding the stylesheet in which your

.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent;
  border: none;
  width: 280px;
}

styles are after google's css.

e.g. your html might look something like this:

<link rel="stylesheet" href="https://cloud.google.com/compute/style.css" type="text/css">
<link rel="stylesheet" href="style/page.css" type="text/css">

Where https://cloud.google.com/compute/ holds the style for the google gcs, and style/page.css holds the .cse .gsc-control-cse, .gsc-control-cse { ... } styles.

As a last ditch attempt, use only If you have to:

(thanks to @MrUpsidown for pointing out that this method is inherently bad)
Add !important after each CSS rule:

.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent !important;
  border: none !important;
  width: 280px !important;
}

The !important css declaration is used to override another style applied to the same element. More info here: http://www.webcredible.com/blog-reports/web-dev/css-important.shtml

Community
  • 1
  • 1
joe_young
  • 4,107
  • 2
  • 27
  • 38
  • Ok thanks! I was doing it wrong I put border:none; !important instead of border: none !important; – user123 May 30 '15 at 16:47
  • Good question as I couldn't find any information about that in the google documentation. Bad answer as we definitely do **not** want to do that. – MrUpsidown Aug 10 '15 at 09:51
  • Because there should be another way to do that. Using `!important` is not a good idea. You can find a lot of information about that fact on the web. Here is a good summary: http://stackoverflow.com/a/3706876/1238965 – MrUpsidown Aug 10 '15 at 10:02
  • Point taken, have updated my answer. Thank you @MrUpsidown – joe_young Aug 10 '15 at 10:15
0

I have noticed, that this question is 6 years and 9 months old, and there is a new version of the gsce. My solution is very simple:

CSS:

    .gsce-search-outter {
      max-width: 35ch; /* about 35 characters long, give or take a few from google's own styling */
    }

HTML:

    <script async src="{URL}"></script>
    <div class="gsce-search-outter"><div class="gcse-search"></div></div>

Demo Snippet:

.gsce-search-outter {
  max-width: 35ch;
}
<!--Note: the src is a demo by google-->
<script async src="https://cse.google.com/cse.js?cx=977e2d39cba1e462e">
</script>
<div class="gsce-search-outter">
<div class="gcse-search"></div>
</div>
Fighter178
  • 303
  • 2
  • 9
  • Note: the width does include the search button, so add about 4-6ch – Fighter178 Mar 19 '22 at 02:24
  • So just ... inline css? Doesn't address the problem the other Q's do which is when you want to override the default CSS that google sets – Kevin May 03 '23 at 18:02