自定义Google Site Search提交按钮?

时间:2013-06-27 19:41:55

标签: javascript css google-custom-search

我已设法自定义Google网站搜索搜索字段和按钮的样式,但我无法弄清楚如何摆脱搜索按钮上显示的“搜索”文本。

基本上,我已经用图像替换了基于css /文本的按钮,但是如下图所示,它仍然在其上方显示“搜索”文本。

无论如何要摆脱这种情况还是我不得不求助于text-indent: -9999px;这样的事情?

按钮的CSS是:

.cse input.gsc-search-button,
input.gsc-search-button {
  width: 103px;
  min-width: 103px;
  height: 36px;
  min-height: 36px;
  border: none;
  background: url('../images/search-btn.png') left top no-repeat;
}

按钮图片:

enter image description here

网站搜索代码:

<div id='cse' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: src="<?=ROOT_URL?>css/default.css"});
google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  var customSearchControl =   new google.search.CustomSearchControl('xxxxxxxxxxxxxxxxxxxxxxxxxx', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  customSearchControl.draw('cse', options);
}, true);
</script>

0 个答案:

没有答案