Css 谷歌自定义搜索（CSEv2）样式帮助？

我需要有关框样式的帮助（不是结果）

旧的样式使用了

表单

标记，您可以轻松地为搜索框的外观设置样式

<form action="/search" id="searchbox_abc:123" class="search">
    <input type="hidden" name="cx" value="abc:12">
    <input type="hidden" name="cof" value="FORID:XX">
    <input type="text" name="q" size="16" class="smalltext">                    
    <input type="submit" name="sa" value="SEARCH" class="smalltext">
</form>

对于新的CSEv2代码，它包含在脚本标记中：

<script>
  (function() {
    var cx = 'abc:123';
    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>

（功能（）{
var cx='abc:123'；
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）；
})();

您必须将以下标记放在希望显示搜索框的位置

<gcse:search></gcse:search>

我需要关于如何设计新的CSE使其看起来像以前的CSE的帮助。（字体大小、按钮和输入字段大小..等，样式与以前完全相同..应用类/设置字体..等）

谢谢

在

选择要设置样式的搜索引擎

单击“外观和感觉”

单击

自定义
选项卡

这有一些选项可用于设置要设置样式的CSE的任何组件的主题

更新

如果您想要比控制面板中提供的选项更多的选项，则必须使用，页面底部有一个使用示例

您尤其感兴趣的是，您可以在其中指定哪个HTML标记、元素的id，然后您可以使用stlye

:

#测试输入{
字体大小：32px；
颜色：红色；
}
var myCallback=函数（）{
如果（document.readyState=='complete'）{
google.search.cse.element.render({
分区：“测试”，
标签：“搜索”
});
}否则{
setOnLoadCallback（函数（）{
google.search.cse.element.render({
分区：“测试”，
标签：“搜索”
});
}，对）；
}
};
window.\uu gcse={parsetags:'explicit'，callback:myCallback}；
（功能（）{
var cx='008717607452966325908:cegvvfhkhvk'；//在此处插入您自己的自定义搜索引擎ID
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）；
})();

使用一个DOM检查工具，比如内置在Google Chrome或Firefox浏览器中的工具。（右键单击一个元素并选择“检查”），这将允许您确定元素ID/类及其当前样式

编写覆盖这些样式的CSS规则，如下所示：

---

您不需要做所有这些，只需将其添加到google搜索标签的末尾，如下所示：

<script>
    (function() {
        var cx = '017524632059031635296:oiqsdcln6tk';
        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:searchresults-only></gcse:searchresults-only>

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

确保在结束脚本标记的底部添加

，并添加自己的表单，例如：

<form action="" method="GET">
  <input class="input" name="q" placeholder="Search...">
</form>

然后，按照您设计任何常规HTML标记的方式来设计它，您就可以开始了！它的工作原理和以前完全一样。注：如果您不想让用户到其他地方，例如search.html，只需添加此

而不是此

---

希望对你有帮助-Arqetech的工作方式。。 1.在google脚本中将async设置为false（gcse.async=false）； 2.在下面添加css。这可能取决于css的加载顺序

.gsc控制cse{ 填充：0！重要； }要清除水印，请执行以下操作：

.gsc-clear-button{
 display:none !important;
}
.cse input.gsc-input,input.gsc-input{
background-image:none !important;
height:30px !important;
}

---

您需要将搜索框的文件和结果分开

对于主文件：

<form action="/search.html" method="get"><!--Change /search.html to your 
results file-->
    <input type="text" name="search" placeholder="Search..">
    <input type="submit" name="q" value="Submit">
</form>
<style>
    input[type=text] {
        width: 150px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }

    input[type=text]:focus {
        width: 300px;
    }

    input[type=submit] {
        width: 100px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
</style>

输入[类型=文本]{
宽度：150px；
框大小：边框框；
边框：2个实心#ccc；
边界半径：4px；
字体大小：16px；
背景色：白色；
背景位置：10px 10px；
背景重复：无重复；
填充：10px；
-webkit过渡：宽度为0.4s，易于进出；
过渡：宽度0.4s，易于进出；
}
输入[类型=文本]：焦点{
宽度：300px；
}
输入[类型=提交]{
宽度：100px；
框大小：边框框；
边框：2个实心#ccc；
边界半径：4px；
字体大小：16px；
背景色：白色；
背景位置：10px 10px；
背景重复：无重复；
填充：10px；
-webkit过渡：宽度为0.4s，易于进出；
过渡：宽度0.4s，易于进出；
}

对于结果文件（默认值：search.html）：

（功能（）{
var cx='abc:123'；
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）；
})();

---

如果它不起作用，可能是因为你的网站不在谷歌搜索引擎上，或者可能是代码错误？如果不起作用，请回复。

谢谢，…但这几乎不能给你太多的控制权…只能控制一些边框或背景颜色。。。在使用表单标签时，如何获得与以前相同的“样式”？比如字体大小，按钮/输入框的大小等等，你是说它在那里，而我错过了吗？或者你没读那本书

.gsc-clear-button{
 display:none !important;
}
.cse input.gsc-input,input.gsc-input{
background-image:none !important;
height:30px !important;
}

<form action="/search.html" method="get"><!--Change /search.html to your 
results file-->
    <input type="text" name="search" placeholder="Search..">
    <input type="submit" name="q" value="Submit">
</form>
<style>
    input[type=text] {
        width: 150px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }

    input[type=text]:focus {
        width: 300px;
    }

    input[type=submit] {
        width: 100px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
</style>

<script>
    (function() {
        var cx = 'abc:123';
        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:searchresults-only></gcse:searchresults-only>