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
Post a Comment