带有图标的搜索输入 Bootstrap

Posted 2023-03-06

【中文标题】带有图标的搜索输入 Bootstrap

【英文标题】：Search input with an icon Bootstrap

【发布时间】：2018-01-23 14:25:01

【问题描述】：

不知道我该怎么做，因为 BS 4 不支持字形图标。我是将其设置为背景还是将不同的定位应用于字体真棒图标？

这是我目前的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="form-group col-md-4">
  <input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->

我想用这个font-awesome icon。我也尝试将其添加为background-image，如下所示：

.form-control 
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;

但这并没有做任何事情。我能想到的唯一方法是添加字体真棒图标，然后将定位设置为绝对，对吗？但我不确定这是否是“干净”和正确的方法？我需要对此采取不同的方法吗？有人帮忙！谢谢！

【参考方案1】：

Bootstrap 5 Beta -（2021 年更新）

     <div class="input-group">
            <input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input">
            <span class="input-group-append">
                <button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
     </div>

Demo

Bootstrap 4（原始答案）

为什么不使用输入组？

<div class="input-group col-md-4">
      <input class="form-control py-2" type="search" value="search" id="example-search-input">
      <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <i class="fa fa-search"></i>
        </button>
      </span>
</div>

并且，您可以使用边框实用工具将其显示在内部输入...

        <div class="input-group col-md-4">
            <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
            <span class="input-group-append">
              <button class="btn btn-outline-secondary border-left-0 border" type="button">
                    <i class="fa fa-search"></i>
              </button>
            </span>
        </div>

或者，使用不带灰色背景的input-group-text，以便图标出现在输入中...

        <div class="input-group">
            <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
            <span class="input-group-append">
                <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
            </span>
        </div>

或者，您可以使用没有间距的网格 (row>col-)：

<div class="row no-gutters">
     <div class="col">
          <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
     </div>
     <div class="col-auto">
          <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
             <i class="fa fa-search"></i>
          </button>
     </div>
</div>

或者，在前面添加这样的图标...

<div class="input-group">
  <span class="input-group-prepend">
    <div class="input-group-text bg-transparent border-right-0">
      <i class="fa fa-search"></i>
    </div>
  </span>
  <input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
  <span class="input-group-append">
    <button class="btn btn-outline-secondary border-left-0 border" type="button">
     Search
    </button>
  </span>
</div>

Demo of all Bootstrap 4 icon input options

---

---

Example with validation icons

【讨论】：

我尝试了选项 3 并收到此警告：Div 不能嵌套在 span 内

输入框半径也有问题，请在引导程序 4 中检查此 css。.input-group>.custom-select:not(:last-child), .input-group>.form-control: not(:last-child) border-top-right-radius: 0;边框右下角半径：0；

我想知道在我将跨度从右向左移动的情况下图标如何（我给主 div 输入组前置类），但我确实有一个简单的框而不是图标

【参考方案2】：

这是一个相当简单的方法，通过将放大镜图标和输入字段都包含在具有相对定位的 div 中。

绝对定位应用于图标，使其脱离正常的文档布局流程。然后将图标定位在输入内。左填充应用于输入，以便用户的输入显示在图标的右侧。

请注意，此示例将放大镜图标放在左侧而不是右侧。建议在使用 <input type="search"> 时这样做，因为 Chrome 在搜索框的右侧添加了一个 X 按钮。如果我们将图标放在那里，它将覆盖 X 按钮并且看起来很丑。

这是所需的引导标记。

<div class="position-relative">
    <i class="fa fa-search position-absolute"></i>
    <input class="form-control" type="search">
</div>

...还有几个 CSS 类用于我无法使用 Bootstrap 类做的事情：

i 
    font-size: 1rem;
    color: #333;
    top: .75rem;
    left: .75rem


input 
    padding-left: 2.5rem;

您可能不得不调整 top、left 和 padding-left 的值。

【参考方案3】：

我制作了另一个变体带有下拉菜单（可能用于高级搜索等）.. 下面是它的样子：

<div class="input-group my-4 col-6 mx-auto">
    <input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">
    <span class="input-group-append">
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <button class="btn btn-outline-primary rounded-right" type="button">
            <i class="fas fa-search"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </span>
</div>

注意：它在屏幕截图中显示为绿色，因为我的网站主题是绿色的。

【参考方案4】：

这是一个右侧带有搜索图标的输入框。

  <div class="input-group">
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
      <div class="input-group-append">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
  </div>

这是一个左侧带有搜索图标的输入框。

  <div class="input-group">
      <div class="input-group-prepend">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
  </div>

【讨论】：

很抱歉劫持另一个帖子来执行此操作。您最近关于在 Laravel 中使用带有 Pivot 模型的演员表的问题是绝对可能的（我正要添加一个答案，但后来这个问题被删除了）。请您重新添加问题，我将添加答案。顺便说一句，你使用的是 >=5.5 的 Laravel 吗？

期待您的回答！我取消删除原来的问题！ ***.com/questions/51869877/…

【参考方案5】：

你也可以使用input-group这样做

<div class="input-group">
  <input class="form-control"
         placeholder="I can help you to find anything you want!">
  <div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>

codeply

【讨论】：

很好的工作分叉了我发布的 Codeply

图标被推到外面，需要是<div class="input-group"> <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search"? <div class="input-group-append"> <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div> </div> </div>

【参考方案6】：

在 ASPX bootstrap v4.0.0 中，无测试版 (dl 21-01-2018)

<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
    <asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
        <i class="ICON-copyright"></i>
    </asp:LinkButton>
</div>