html - How to style google cse -


i've got code google i'm unable style it, put new rule in site's css doesn't listen , overrides google's default, can make want instead of how google planned it?

that's css gets ignored

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

and that's 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>

try adding stylesheet in your

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

styles after google's css.

e.g. html might 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 style google gcs, , style/page.css holds .cse .gsc-control-cse, .gsc-control-cse { ... } styles.

as last ditch attempt, use if have to:

(thanks @mrupsidown pointing out method 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 used override style applied same element. more info here: http://www.webcredible.com/blog-reports/web-dev/css-important.shtml


Comments

Popular posts from this blog

node.js - Using Node without global install -

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

java - Null response to php query in android, even though php works properly -