html - 如何使用 Bootstrap 在文本框中添加搜索图标

Question

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

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

Answer 1

您需要做的是创建一个按钮并在表单中彼此相邻输入，然后使用 CSS 将按钮绝对定位在表单顶部。

将按钮(bootstrap 包含许多有用的图标)设置为看起来像放大镜的样式，然后就可以了!

-编辑-

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

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

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