Google自定义搜索（CSEv2）有关样式的帮助？ [英] Google Custom Search (CSEv2) help on styling?

问题描述

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

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

旧样式使用形式标签，您可以轻松地在样式中

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的样式的帮助。 （字体大小，按钮和输入字段大小...etc，与before..apply类/ set font..etc完全相同的样式）

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)

谢谢！ >

Thanks!

推荐答案

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

1. Use a DOM inspection tool like the one built into the Google Chrome or Firefox browsers. (Right click on an element and select "Inspect.") This will allow you to determine element IDs/classes and their current styles.

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

Write CSS rules that override those styles, like this:

input.gsc-input {}
input.gsc-search-button {}
form.gsc-search-box {}
div.gsc-control-cse {}

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