Question

我遇到的问题是我希望在搜索栏旁边显示一个图像默认字词＆＃34;搜索＆＃34;。即使我已经在我想要显示的图像的URL中编码，图像也不会出现。我按照本教程中的说明安装了自定义搜索栏 - http://www.bloominrouge.com/2015/01/a-simple-and-sleek-search-bar-widget.html。

下面我已经包含了搜索栏的整个编码：

<style>

  #search {    
    background: url (https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png) 98% 50% no-repeat;
    text-align: left; 
    margin-right:-4%;
    width: 100%;  
    float:right;
    max-width: 210px;
    border: 0;
  }  
  #searchform {
    height: 20px;
}
 #search #s {  
    background: #f8f8f8;  
    color: #333333; 
    font-size: 10px!important; 
    font-family: karla, arial;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0.09em;
    border: 0;  
    width: 60%;
    padding: 0;  
    margin: 0;  
    outline: none;  
    position: relative;
    top: 9px;
    padding-left: 6px;
  }  

</style>

<div id='search' title='Type and hit enter'> 
  <form action='/search' id='searchform' method='get'> 
    <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/> 
  </form> 
</div>  
<br/><br/>

我已多次尝试调整边距和填充编号，以查看大量边距和填充元素是否干扰图像但无效。我也试过插入不同的图像，但即使这样也没有用。

Answer 1

你走了：

#search {    
    background: url(https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png);
    background-repeat:no-repeat;
    background-position:98% 5px;
    text-align: left; 
    width: 100%;  
    float:right;
    max-width: 210px;
    border: 0;
  }  

 #search #s {  
    background: #f8f8f8;  
    color: #333333; 
    font-size: 10px!important; 
    font-family: karla, arial;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0.09em;
    border: 0;  
    width: 60%;
    padding: 0;  
    margin: 0;  
    outline: none;  
    position: relative;
    top: 0px;
    padding-top:9px;
    padding-left: 6px;
  }

url和（需要删除和top:9px之间的空格需要更改，因为它隐藏了任何溢出的内容。

图像不会出现在悬停导航栏中

1 个答案: