如何合并HTML输入框和按钮？ （附图样）

Question

请回答以下问题：

1. 如何合并搜索框和搜索按钮，如下面的example1和example2所示？盒子和按钮连接在一起。
2. 如何在搜索框的左侧放置“放大镜”图标？
3. 如何将默认文字放入框中，例如“搜索商品”，并在用户点击框时将其淡化。

例1

例2


示例3（我不想要一个单独的按钮，如下所示）

请帮忙！谢谢！

Answer 1

最简单的方法是制作整个文本字段包装器，从左侧的图标到右侧的按钮，一个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 2

对于您的第一个问题，有很多方法可以完成按钮与搜索框的连接。

最简单的方法是将两个元素都悬浮在左边：

HTML：

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

CSS：

input,
button {
    float: left;
}

Fiddle

但是，此方法有一些限制，例如，如果您希望搜索框具有基于百分比的宽度。

在这些情况下，我们可以使用绝对定位将按钮叠加到搜索框上。

.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 polyfill。

Answer 3

一切都在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/

Src：快速谷歌。

Answer 4

你没有合并它们，而是你给出了你的错觉。这只是CSS。杀死搜索框边框，将其全部扔进带有白色背景的跨度中，然后在两个东西之间放置花哨的小点障碍。然后折腾到一些边界半径，你就可以了。

Answer 5

上面的啧啧可能看起来太冗长了。基本思路是：
像你一样安排输入框。 input文本框后面应该有按钮。添加以下css来做到这一点。

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

或者你可以使用绝对定位。

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/