Question

google search http://tech-and-teaching.com/wp-content/uploads/2012/11/firefox-search.png

如何使用bootstrap创建一个突出显示的搜索框（图像顶部）？放大镜图标应该是可点击的。

Answer 1

您需要做的是在表单中创建一个按钮并相互旁边输入，然后使用CSS绝对将按钮放在表单顶部。

按钮样式（引导程序包含许多有用的图标）看起来像放大镜，你去了！

- 编辑 -

一些示例代码，因为我感觉很慷慨。

<div id="form-master">
<form method="post">
    <div id="search-box">
        <input type="text" name="search" />
    </div>

    <div id="search-button">
        <input type="submit" name="run" />
    </div>
</form>
</div>

CSS：

#form-master {
position: relative;
width: 200px;
height: 30px;
}

#search-box {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 190px;
height: 20px;
padding: 5px;
}

#search-button {
position: absolute;
top: 5px;
right: 5px;
z-index: 5;
border: none;
width: 25px;
height: 25px;
background: url('magnifier.png') top no-repeat;
}

这是非常粗糙的，但方向正确。

Answer 2

添加图标作为背景图像，或者如果您希望它是可点击的示例：像google做浮动输入然后输入文本在左上角和下半部分添加border-radius并在输入提交中添加bordr radius在右侧部分在底部和向上，使它们在相同的背景中，并在输入提交添加为您想要的背景img图标。它看起来一样：）

如何使用bootstrap在文本框中添加搜索图标

2 个答案: