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'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;
}