如何合并HTML输入框和按钮？(附图样)

Question

请回答以下问题:

1. 如何合并搜索框和搜索按钮,如下面的example1和example2所示？盒子和按钮连接在一起.
2. 如何在搜索框的左侧放置"放大镜"图标？
3. 如何将默认文本放入框中,如"搜索项目",并在用户点击框时淡出.

例1

例题

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

小提琴

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

在这些情况下,我们可以使用绝对定位将按钮覆盖到搜索框上.

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

小提琴

这里的限制是按钮必须是特定的宽度.

可能最好的解决方案是使用新的flexbox模型.但是您可能会遇到一些浏览器支持问题.

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

input {
    flex-grow: 2;
}

小提琴

对于您的第二个问题(添加放大镜图标),我只需将其添加为搜索框中的背景图像.

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/

来源：快速谷歌。