How to style google cse

Question

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>

Answer 1

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