javascript - 如何设置 Google 自定义搜索框的样式

Question

我想做站内搜索，我用的是google自定义搜索，但是有自己的风格。我想使用 CSS 更改搜索框的样式。

请不要使用 AJAX 和 jQuery。

JavaScript:

(function() {
    var cx = 'myID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();

HTML:

<gcse:search></gcse:search>

我想要这样的东西:www.w3schools.com

Answer 1

您可以使用 DOM 检查工具右键单击搜索栏并检查元素。并且您可以确定 ID 和类以及默认样式。接下来，您可以创建自己的 css 规则来覆盖默认规则，尝试像这样的 css 代码:

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