Javascript 谷歌自定义搜索与自定义搜索框？

我正在寻找添加一个谷歌自定义搜索到我的网站，但我已经样式的搜索框占位符，我希望有我的搜索框这样看

经过一番搜索，前面的问题似乎都过时了

关于造型，我唯一发现的是：

<script>
    (function() {
    var cx = 'XXXXXXXXXX:YYYYYYYYY';
    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>
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:nonw here it doesn't work-->
    <gcse:search></gcse:search>
</div>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="">
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
    <input value="FORID:11" name="cof" type="hidden"/>
    <input id="q" style="" name="q" size="75" type="text"/>
    <button class="btn">Search</button>
</form>

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

但是，当您提交表单时，什么也没有发生

我注意到action=”“留空，当我输入我的网站“www.kokorugs.com/”时，它也不起作用

---

任何想法都将不胜感激

我发现的唯一方法是使用JQuery在呈现的Google元素中创建钩子。由于您希望将自定义搜索框挂接到元素中，因此应该只渲染gsce:results，而不是gsce:search，并遵循我之前的一个示例的实现