使用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。

Answer 1

以下是三种不同的方法：

Here's a working Demo in Fiddle Of All Three

验证

您可以使用本机引导validation states（无自定义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>

如需完整讨论，请参阅我对adding Twitter Bootstrap icon to Input box

的回答

无格式输入组：

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

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

<div class="input-group input-group-unstyled">
    <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;
}

---

此外，这些解决方案适用于any input size

Answer 2

将一个宽度为90％的类添加到输入元素中，并将以下输入图标类添加到您的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;
}

修改 根据Dan的建议，使用.input作为类名是不明智的，建议更具体一些。我只是使用.input作为你的css的通用占位符

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

Answer 4

我喜欢@KyleMit关于如何创建一个没有样式的输入组的答案，但在我的情况下，我只希望右侧没有样式 - 我仍然想在左侧使用输入组插件让它看起来像普通的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>

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>