最近想给自己的网站上添加一个搜索功能,于是想到了采用google的自定义搜索。接着便去google申请了自定义搜索,以下是得到的原生的javascript代码。<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'zh-CN', style : google.loader.themes.GREENSKY});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('016419072548778858823:hvh-indbqaw');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>我放在网站上,发现google原生的搜索框样式看起来真有点折腾人,而且默认还是整个浏览器的宽度,虽然我知道在style里面把width宽度之类的减小,或者做一些其他小改动。但是搜索框的样式还是不尽如人意,后来索性不用google自带的搜索样式。
于是就把上面代码中掌控css样式的代码:
google.load('search', '1', {language : 'zh-CN', style : google.loader.themes.GREENSKY});
改成了:
google.load('search', '1', {language : 'zh-CN',"nocss" : true});
结果google搜索边框的样式没有了,但是却发现google搜索框有文字溢出。由于对google的api还不是很熟悉,不知道溢出的文字具体来源于何处,所以想在这里请各位大侠帮忙,希望样式能够简单到一个文本输入框加一个搜索按钮就行了,占地面积不能太低,高度:32px;宽度:185px。希望各位大侠帮个忙。
上面的原生代码,大家可以直接复制到网页的body部分测试(由于该代码限制了站点,在本地无法搜索,但是改动css样式足矣),希望各位高手帮助小弟一下,感激不尽(搜索框中有默认输入文字也行)。

解决方案 »

  1.   

    样式可选的,自定义搜索. 
    ------------------------------------------------------------------------------------------------
    http://www.jiemengwu.com/ 解梦屋 http://www.phpzy.com/php/ 绿色php资源http://www.shopfw.com网店服务
      

  2.   

    改一句:<div id="cse" style="width:185px;height:32px;overflow:hidden;">Loading</div>
      

  3.   

    我加入overflow:hidden后确实解决了我的难题。用了overflow:hidden之后,溢出的内容就被隐藏掉了。不过,由于我用方法禁掉了Google自带的css样式,而且我设置的高度:32px太高了,结果造成文本输入框太窄,而搜索框自带的文字:Pwered by Google露出来了。
    于是我把高度降低到25px,再用margin-top:3px,和上面的内容隔开了一点距离,这样看起来就好多了。而且我不只是简单地把css属性做了宽度、高度要求。此外还用#cse input[type="text"]和#cse input[type="submit"]对搜索框的文本框样式和按钮样式做了改动,按钮还加了背景图片。现在看起来就好多了。关键还是这个overflow:hidden的作用。
    ps:我以前知道这个overflow:hidden的作用,也用过,不过由于我不清楚搜索框样式的内部设计代码,以及css属性用得还不是很熟练,结果才来求助的...
    最后一句:谢谢这位大哥,也谢谢回帖的所有人,尤其是这位大哥,帮我解决好几个问题了!由衷感谢!