Question

我知道有很多关于这个主题的帖子，但阅读它们并测试代码并没有帮助解决我遇到的问题。我试图让搜索框变小，以便将其添加到菜单栏中。我能够使搜索框变小，但按钮远离输入框。我尝试改变＆＃34; TD＆＃34;的宽度。该行的标记并没有修复它。我在常规的aspx页面上进行测试，直到我正确配置它，然后将其添加到我的母版页。

Test.aspx文件

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <script type="text/javascript">
    (function () {
      var cx = '##############################';
      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);
    })();    
  </script>  
  <gcse:searchbox-only></gcse:searchbox-only>    
</asp:Content>

CSS

.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 
{
  height: 15px !important;
  margin-top: 0 !important;
  min-width: 13px !important;
  padding: 5px 5px !important;
  width: 20px !important;    
}

input.gsc-input {    
  width:180px !important;    
  font-family:Verdana, Geneva, 'DejaVu Sans', sans-serif !important;
  font-size:x-small !important;
  color:purple !important;
}

td.gsc-input 
{    
  width:180px !important;    
}

.gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus 
{
  border-color: #00ff90 !important;
  width:200px !important;
}

table.gsc-search-box 
{
  border-spacing: 0 0  !important;
}

我老老实实地搜索并查看了很多文章，但我仍然无法获得正确的更改组合，无法正确显示。谢谢。

Google自定义搜索自定义

0 个答案: