Html 使用引导程序将搜索图标放在文本框附近

Put search icon near textbox using bootstrap

提问by Saurabh Mahajan

I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.

我在默认情况下使用引导程序占据列的全宽，我想将搜索图标放在文本框的末尾。

My code is like this:

我的代码是这样的：

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

I don't want to use input group.

我不想使用输入组。

Please suggest an alternate way or alternate html with css.

请建议一种替代方式或使用 css 替代 html。

回答by KyleMit

Here are three different ways to do it:

以下是三种不同的方法：

Here's a working Demo in Fiddle Of All Three

这是所有三个小提琴中的一个工作演示

Validation:

验证：

You can use native bootstrap validation states(No Custom CSS!):

您可以使用本机引导程序验证状态（无自定义 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>

For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box

有关完整的讨论，请参阅我对将 Bootstrap Glyphicon 添加到输入框的回答

Input Group:

输入组：

You can use the .input-groupclass like this:

你可以.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>

For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box

有关完整讨论，请参阅我对将 Twitter Bootstrap 图标添加到输入框的回答

Unstyled Input Group:

无样式输入组：

You can still use .input-groupfor positioning but just override the default styling to make the two elements appear separate.

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

Use a normal input group but add the class input-group-unstyled:

使用普通输入组但添加类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>

Then change the styling with the following css:

然后使用以下 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;
}

---

---

Also, these solutions work for any input size

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

回答by Jim

Adding a class with a width of 90% to your input element and adding the following input-icon class to your span would achieve what you want I think.

将宽度为 90% 的类添加到您的输入元素并将以下输入图标类添加到您的跨度将实现您想要的我认为。

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

EDITPer dan's suggestion, it would not be wise to use .input as the class name, some more specific would be advised. I was simply using .input as a generic placeholder for your css

编辑Per dan 的建议，使用 .input 作为类名是不明智的，建议使用更具体的一些。我只是使用 .input 作为你的 css 的通用占位符

回答by vishnu ferno

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

Here's the CSS for the image on the left:

这是左侧图像的 CSS：

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

And here's the CSS for the image on the right:

这是右侧图像的 CSS：

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

回答by goat

I liked @KyleMit's answer on how to make an unstyled input group, but in my case, I only wanted the right side unstyled - I still wanted to use an input-group-addon on the left side and have it look like normal bootstrap. So, I did this:

我喜欢@KyleMit 关于如何制作无样式输入组的回答，但就我而言，我只想要右侧无样式 - 我仍然想在左侧使用输入组插件，让它看起来像正常的引导程序。所以，我这样做了：

css

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

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>

回答by Code Slinger

You can do it in pure CSS using the :after pseudo-element and getting creative with the margins.

您可以在纯 CSS 中使用 :after 伪元素并利用边距发挥创意。

Here's an example, using Font Awesome for the search icon:

这是一个示例，使用 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>