使用引导将搜索图标放在文本框附近 [英] Put search icon near textbox using bootstrap

问题描述

我的代码是这样的：

我使用默认文本框的引导，以列的全部宽度为起点， / p>

 < div class =container> 
< div class =row> 
< div class =form-group col-lg-4> 
< label class =control-label> Name< / label> 
< input id =txtNameclass =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。

解决方案

这里有三种不同的方法： / h2>

这是一个工作

验证：

您可以使用原生引导验证状态（无自定义CSS ！）：

 < div class =form-group has-feedback> 
< label class =control-labelfor =inputSuccess2> Name< / label> 
< input type =textclass =form-controlid =inputSuccess2/> 
< span class =glyphicon glyphicon-search form-control-feedback>< / span> 
< / div> 
  

有关完整讨论，请参阅我对为输入框添加引导字形

输入组：

您可以使用 .input-group class like this：

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

有关完整讨论，请参阅我对在输入框中添加Twitter Bootstrap图标

Unstyled输入组：

您仍然可以使用 .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; 
} 
  

---

任何输入大小

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.

解决方案

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!):

<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

Input Group:

You can use the .input-group class like this:

<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

Unstyled Input Group:

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

Use a normal input group but add the class 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:

.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

这篇关于使用引导将搜索图标放在文本框附近的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！