如何合併HTML輸入框和按鈕？ （附樣本圖像）

Question

請回答以下問題：

1. 如何合併搜索框，如下圖所示例1和例2搜索按鈕？盒子和按鈕連接在一起。
2. 如何將'放大鏡'圖標放在搜索框的左側？
3. 如何將默認文本放入「搜索項目」框中，並在用戶單擊該框時淡入。

例1

例題

示例3（我不想要一個單獨的按鈕，如下圖所示）

請幫幫忙！謝謝！！

Answer 1

這一切都在CSS ...你想是這樣的：

http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box

此外，對於搜索圖標：

http://zenverse.net/create-a-fancy-search-box-using-css/

源：快速谷歌。

Answer 2

最簡單的方法是將整個文本字段包裝，從左側的圖標到右側的按鈕，一個div，一個圖像。

然後把一個文本框放在那個包裝盒裏，並且有一個像30px一樣的頁邊空白;

然後把一個div放在位於右側的包裝中，併爲它添加一個點擊監聽器。

HTML：

<div id="search_wrapper"> 
    <input type="text" id="search_field" name="search" value="Search items..." /> 
    <div id="search_button"></div> 
</div> 

CSS：

#search_wrapper{ 
    background-image:url('/path/to/your/sprite.gif'); 
    width:400px; 
    height:40px; 
    position:relative; 
} 

#search_field { 
    margin-left:40px; 
    background-transparent; 
    height:40px; 
    width:250px; 
} 

#search_button { 
    position:absolute; 
    top:0; 
    right:0; 
    width:80px; 
    height:40px; 
} 

JQuery的：

$(function(){ 

    // Click to submit search form 
    $('#search_button').click(function(){ 
     //submit form here 
    }); 

    // Fade out default text 
    $('#search_field').focus(function(){ 
     if($(this).val() == 'Search items...') 
     { 
      $(this).animate({ 
       opacity:0 
      },200,function(){ 
       $(this).val('').css('opacity',1); 
      }); 
     } 
    }); 
}); 

Answer 3

你不合並它們，而你給你的錯覺。這只是CSS。殺死搜索框邊框，將其全部放入白色背景的跨度中，然後在兩件事物之間放置一個奇怪的小點屏障。然後在一些邊界半徑內折騰，然後開始營業。

Answer 4

以上tut可能看起來太長。基本思想是這樣的：
像你一樣排列輸入框。 input文本框應該緊跟着按鈕。添加下面的CSS來做到這一點。

position:relative; 
top:-{height of your text box}px; 

或者您可以使用絕對定位。

Answer 5

對於第一個問題，有許多方法可以將按鈕連接到搜索框。

最簡單的是簡單的兩個元素浮動到左：

HTML：

<div class="wrapper"> 
    <input placeholder="Search items..."/> 
    <button>Search</button> 
</div> 

CSS：

input, 
button { 
    float: left; 
} 

Fiddle

這種方法有一定的侷限性然而， ，比如你想讓搜索框有一個基於百分比的widt H。

在這些情況下，我們可以使用絕對定位將按鈕覆蓋到搜索框上。

.wrapper { 
    position: relative; 
    width: 75%; 
} 

input { 
    float: left; 
    box-sizing: border-box; 
    padding-right: 80px; 
    width: 100%; 
} 

button { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 80px; 
} 

Fiddle

這裏的限制是，按鈕具有爲特定的寬度。

可能最好的解決方案是使用新的flexbox模型。但是您可能會遇到一些瀏覽器支持問題。

.wrapper { 
    display: flex; 
    width: 75%; 
} 

input { 
    flex-grow: 2; 
} 

Fiddle

關於第二個問題（加上放大鏡圖標），我只想補充它在搜索框的背景圖像。

input { 
    padding-left: 30px; 
    background: url(magnifier.png) 5px 50% no-repeat; 
} 

你也可以玩的圖標，字體和::before假的內容，但你可能必須處理瀏覽器的不一致性。

對於第三個問題（添加佔位符文本），只需使用placeholder屬性。如果您需要支持舊瀏覽器，則需要爲其使用JavaScript填充。

Answer 6

<div id="search_wrapper"> 
    <input type="text" id="search_field" name="search" placeholder="Search items..." /> 
    <div id="search_button">search</div> 
</div> 

#search_wrapper{ 
    background-color:white; 
    position:relative; 
    border: 1px solid black; 
    width:400px; 
} 

#search_field {  
    background-transparent; 
    border-style: none; 
    width: 350px; 
} 

#search_button { 
    position:absolute; 
    display: inline; 
    border: 1px solid black; 
    text-align: center; 
    top:0; 
    right:0; 
    width:50px; 
} 

http://jsfiddle.net/zxcrmyyt/

[在文本框顯示搜索圖像]的