Google CSE with Twitter Bootstrap not displaying the search box correctly

Question

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

<script>
    (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:') +
            '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
<gcse:search></gcse:search>

Can anyone please help?

http://jsfiddle.net/nz6rh/

screenshot of the abnormal searchbox

Answer 1

I have used the following CSS to resolve the Bootstrap conflict:

input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button {
    box-sizing: content-box; 
    line-height: normal;
}

You can check the working example here (I use Bootstrap 3.2 currently): http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/

Answer 2

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:

.gsc-search-button
{
    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("http://www.google.com/uds/css/v2/search_box_icon.png") !important;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 16px !important;
    border-color: #1a4195 !important;
    filter: none;
}

Answer 3

Per getbootstrap.com:

Some third party software, including Google Maps and Google Custom Search Engine, conflict >with Bootstrap due to * { box-sizing: border-box; }

Check the Third party support section for some work-arounds.