图像未出现在悬停导航栏中

Question

我遇到的问题是我希望在搜索栏默认文字 "search" 旁边显示一张图片。即使我在 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 和 ( 之间的 space 需要删除，top:9px 需要更改，因为它隐藏了溢出的任何内容。

图像未出现在悬停导航栏中

Image Doesnt Appear In The Hovering Navigation Bar

html

css

blogger