Jquery 带有Twitter引导的Google CSE未正确显示搜索框

谷歌自定义搜索（CSE）未正确显示搜索框和按钮。 我正在使用TwitterBootstrapV3.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>

（功能（）{
变量cx='009077552906670546181:2UFNG0DMSO'；
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）；
})();

有人能帮忙吗

---

我也有同样的问题。这不是最好的解决方案，但在这个解决方案出现之前。。。它可以帮助你。尝试使用您自己的颜色和尺寸将其添加到CSS文件中：

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

根据getbootstrap.com：

一些第三方软件，包括谷歌地图和谷歌自定义搜索引擎，由于*{box size:border box；}与引导程序冲突>

---

检查一些解决方法。

我使用了以下CSS来解决引导冲突：

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

您可以在这里查看工作示例（我目前使用Bootstrap 3.2）： 解决方案如下：

-在站点的.css中添加以下代码：

.gsc-results-wrapper-overlay, .gsc-results-wrapper-visible, .gsc-search-button, .gsc-search-button-v2 {
        box-sizing: content-box;
    }

从中，我得到：

---

以下几点对我很有用：

CSS:

#gsc-i-id1 {
    position: relative;
    left: -7px;
    top: -4px;
}

input.gsc-search-button-v2 {
    height: 26px !important;
    margin-top: 0 !important;
    min-width: 13px !important;
    padding: 5px 26px !important;
    width: 68px !important;
}

---

请共享JSFIDLE链接？在JSFIDLE中尝试了您的代码。我想工作很好。按钮和搜索框的具体问题是什么？问题似乎不是重复的，或者我无法用提供的解决方案解决我的问题。更新了JSFIDLE来模拟这个问题。接受的答案没有用google CSE和Bootstrap 3修复输入框的样式。答案是这样的。第一个CSS块修复了类型框的偏移量；第二个修复了搜索按钮。第二个CSS块的源代码：

#gsc-i-id1 {
    position: relative;
    left: -7px;
    top: -4px;
}

input.gsc-search-button-v2 {
    height: 26px !important;
    margin-top: 0 !important;
    min-width: 13px !important;
    padding: 5px 26px !important;
    width: 68px !important;
}