搜索框与文本框中的按钮

Question

我想创建一个文本框,里面有一个按钮,就像我在一些网站上看到的那样,通常有一个文本框,右手边有一个带有手镜头图像的按钮,当点击按钮时,表单就会被提交.我尝试使用div来创建类似的东西,但我似乎没有得到它.它是如何用css完成的,还是有一些jquery魔法呢？

Answer 1

使用包装器

您所指的技术通常没有文本框内的按钮,按钮和文本框的边框和背景只是与包装div混合.这是一个基本的例子:

的jsfiddle

HTML

<div class="wrapper">
    <input type="text" />
    <button>GO</button>
</div>

CSS

.wrapper {
    border:1px solid #000;
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}

运用 position:absolute

另一种方法是绝对定位按钮并将其连接到右侧.这样做的好处是您可以更轻松地在文本框周围实现焦点/活动边框.您可以通过提供padding-right文本框来解决按钮问题下的文本.

的jsfiddle

.wrapper {
    border:1px solid #000;
    display:inline-block;
    position:relative;
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
    position:absolute;
    right:0;
    top:0;
}

input {
    padding-right:30px; /* button padding */
}