如何在HTML中創建類似Mozilla的搜索文本框

Question

如何使用css和html創建類似的「搜索」元素。請注意，從左側的列表框中，用戶也選擇搜索引擎。

謝謝

Answer 1

因爲我不能給你做的絕對方式這讓我給你品嚐

HTML

<div class="search"> 
    <div class="listbox"> 
     <ul> 
      <li>Google</li> 
      <li>Yahoo</li> 
      <li>Bing</li> 
     </ul> 
    </div> 
    <input type="text" value="type here to search" /> 
    <a href="#" class="submitBtn"></a> 
</div> 

CSS

.search { 
    width:200px 
    position: relative; /* So you can position the other elements /* 
} 
.search .listBox { 
    position: absolute; 
    top:0; 
    left:0; 
    /* You will need to use javascript to open and close this one */ 
} 

.search input { 
    border: 1px solid #aaa; 
    padding-left: 50px; /*so you can have have your list on the left; 
    width: 150px; 
} 
.search .submitBtn { 
    position: absolute; 
    top: 2px; 
    right: 5px; 
    display: block; 
    width: 25px; 
    height: 25px; 
    background-image: url (img.png); 
} 

這是非常通用的，但會讓你開始