html - 如何合并 HTML 输入框和按钮？ (附上样本图片)

Question

请回答以下问题:

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

例子1

例子2

Example3(我不想要一个单独的按钮，如下所示)

求助!谢谢!!

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