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

Question

请回答以下问题：

1. 如何合并搜索框和搜索按钮，如下面的 example1 和 example2 所示？盒子和按钮连接在一起。
2. 如何将“放大镜”图标放在搜索框的左侧？
3. 如何将默认文本放入“搜索项目”等框中，并在用户单击该框时使其淡出。

例子一

例子2

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

请帮忙！谢谢！！

原文由 sumit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最简单的方法是制作整个文本字段包装器，从左边的图标到右边的按钮，一个 div，一个图像。

然后在该包装器内放置一个文本字段，其 margin-left 为 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;
}

查询：

 $(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);
            });
        }
    });
});

原文由 AlienWebguy 发布，翻译遵循 CC BY-SA 3.0 许可协议