Google 自定义搜索 (CSEv2) 对样式的帮助?

问题描述

我需要有关 Google 自定义搜索框(不是结果)样式的帮助

I need help on styling the Google Custom Search Box (not the results)

旧样式使用 form 标签，您可以在其中轻松设置外观样式.搜索框的感觉.

Old styles were using the form tags, where you could easily style the look & feel of the search box.

<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 代码，它包含在脚本标签中:

With the new CSEv2 code, it is contained in script tags:

<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>

并且您必须将以下标签放在您希望显示搜索框的位置.

and you have to put the following tags where you want the Search Box to be displayed.

<gcse:search></gcse:search>

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

I need help on how to style the new CSE to look like the previous one. (font size, button and input field sizes..etc, exactly the same styling as before..apply classes/set font..etc)

谢谢！

推荐答案

你不需要做所有的事情，只需将这个添加到 google 搜索的末尾 <script> 标签 Like So:

You don't need to do all that just add this to the end of the google's search <script> tag Like So:

<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>

确保在该结束脚本标记的底部添加 <gcse:searchresults-only ></gcse:searchresults-only> 并添加您自己的表单 例如:>

Make sure you add <gcse:searchresults-only ></gcse:searchresults-only> at the bottom of that closing script tag And add your own form For example:

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

然后设置样式就像您设置任何常规 HTML 标签的样式一样，您就可以开始了！它的工作方式与过去完全一样.附注.如果您不想将用户带到其他地方来查看示例 search.html 只需添加此 <form action="search.html" method="GET"> 插入此 <form action="" method="GET">

Then style It just how you would style any regular HTML tag, And you're good to Go! and It works exactly the way It used to work. PS. If you wan't to take the user some other place for Example search.html Just add this <form action="search.html" method="GET"> insted of this <form action="" method="GET">

希望对你有帮助！-Arqetech

Hope It helped you! -Arqetech

这篇关于Google 自定义搜索 (CSEv2) 对样式的帮助?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！