user2094440 user2094440 - 1 year ago 93
CSS Question

Google CSE with Twitter Bootstrap not displaying the search box correctly

The Google Custom Search (CSE) not displaying the search box and the button correctly.
I am using Twitter Bootstrap v3.1.0.

(function() {
var cx = '009077552906670546181:2ufng0dmsos';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);

Can anyone please help?

screenshot of the abnormal searchbox

Answer Source

I've got the same problem. It is not the best solution, but until this solution comes... it could help you. Try adding this to your CSS file with your own colours and measures:

    background-color: #1a4195;
    border-radius: 5px;


input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    background-color: #1a4195 !important;
    background-image: url("") !important;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 16px !important;
    border-color: #1a4195 !important;
    filter: none;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download