user2094440 user2094440 - 1 month ago 6x
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


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;