使用Bootstrap将搜索图标放在文本框附近

Question

我默认使用bootstrap文本框占据整个列宽，我希望在文本框的末尾放置搜索图标。

我的代码如下：

<div class="container">
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="control-label">Name</label>
            <input id="txtName" class="form-control input-sm" />
            <span class="glyphicon glyphicon-search"></span> 
        </div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>

我不想使用输入组。

请建议其他方法或带有CSS的其他HTML。

- Saurabh Mahajan

---

我认为这可能会有所帮助：https://dev59.com/Q2Ml5IYBdhLWcg3wZWWE#23375097 您必须在col-xs-＃中包装每个元素。 - Dan

Answer 1

以下是三种不同的实现方式：

这里是所有三种实现方式的工作演示

验证：

你可以使用原生的 Bootstrap 验证状态 （无需自定义 CSS）：

<div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2">Name</label>
    <input type="text" class="form-control" id="inputSuccess2"/>
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

完整的讨论请参见我的回答：Add a Bootstrap Glyphicon to Input Box

输入组：

您可以像这样使用.input-group类：

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

有关详细讨论，请参见我的回答：将Twitter Bootstrap图标添加到输入框

未经样式化的输入组：

您仍然可以使用.input-group进行定位，但只需覆盖默认样式以使这两个元素出现分离。

使用普通输入组，但添加类input-group-unstyled：

<div class="input-group <b>input-group-unstyled</b>">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

然后使用以下CSS更改样式：

.input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

---

此外，这些解决方案适用于任何输入大小

- KyleMit

---

他提到他不想使用input-group。 - Jim

@Jim，是的，这就是为什么我的第一个建议没有包括它，但是以后可能会有其他人遇到这个问题，他们不会有同样的限制。请问您需要什么帮助吗？ - KyleMit

@KyleMit，可能是fiddle与IE11不兼容（图标显示不正确）吗？ - OfirD

@HeyJude，这个月我遇到了麻烦，因为我所有的旧代码都使用了http://getbootstrap.com/dist/js/bootstrap.js，而它已经升级到V4版本。我已经更新了Fiddle到3.3.7版本，现在应该可以正常工作了。 - KyleMit

看起来它不适用于Bootstrap 4；需要改变什么才能使其工作？ - musicformellons

Answer 2

将输入元素添加一个宽度为90%的类，并将以下input-icon类添加到您的span中，我认为可以实现您想要的效果。

.input { width: 90%; }
.input-icon {
    display: inline-block;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
}

编辑 根据丹的建议，使用.input作为类名并不明智，建议使用更具体的名称。我只是将.input用作CSS的通用占位符。

- Jim

---

我认为这不是一个好主意，因为这将使网站上的所有输入都变成90%。如果您想采用这种方法，那么您应该创建一个自定义类（而不是通用的“input”）。 - Dan

Answer 3

<input type="text" name="whatever" id="funkystyling" />

这里是左侧图片的CSS代码：

#funkystyling {
    background: white url(/path/to/icon.png) left no-repeat;
    padding-left: 17px;
}

这是图片右侧的CSS样式：

#funkystyling {
    background: white url(/path/to/icon.png) right no-repeat;
    padding-right: 17px;
}

- vishnu ferno

Answer 4

我喜欢@KyleMit在如何制作未经过样式处理的输入组方面的回答，但在我的情况下，我只想要右侧未经过样式处理 - 我仍然想在左侧使用input-group-addon，并使其看起来像正常的bootstrap。所以，我做了这个：

css

.input-group.input-group-unstyled-right input.form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

html

<div class="input-group input-group-unstyled-right">
    <span class="input-group-addon">
        <i class="fa fa-envelope-o"></i>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-addon input-group-addon-unstyled">
        <i class="fa fa-check"></i>
    </span>
</div>

- goat

Answer 5

你可以使用 :after 伪元素和创意边距来纯粹地使用 CSS 来完成它。

以下是一个示例，使用 Font Awesome 来制作搜索图标：

.search-box-container input {
  padding: 5px 20px 5px 5px;
}

.search-box-container:after {
    content: "\f002";
    font-family: FontAwesome;
    margin-left: -25px;
    margin-right: 25px;
}

<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="search-box-container">
  <input type="text" placeholder="Search..."  />
</div>

- Code Slinger