Bootstrap 4：搜索输入x清除搜索[重复]答案

【问题标题】：Bootstrap 4: search input x clear search [duplicate]Bootstrap 4：搜索输入x清除搜索[重复]
【发布时间】：2019-03-24 10:50:54
【问题描述】：

使用最新的Bootstrap 4，我正在尝试在search input 中添加一个x。

我可以简单地使用

<input type="search" placeholder="Search..." />

但是Firefox不支持这个...

我尝试过使用addon 和negative margins，但不知何故，Bootstrap 隐藏了我的按钮...

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
        <div class="input-group-addon">
          <button class="btn bg-transparent">
            <i class="fa fa-times"></i>
          </button>
        </div>
</div>

如何让我的 x 按钮显示在正确对齐的输入框中？

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

我认为input-group-addon 是问题所在。

试试这个：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
    <button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;">
      <i class="fa fa-times"></i>
    </button>
</div>

看起来像这样：

【讨论】：

我无法编辑响应，但请注意不要将type="button" 属性添加到按钮。每当您在键盘上点击 Enter 时，该按钮将被“隐式”单击，至少在 <form> 元素内时是这样
感谢您的提示。我编辑了答案。
当我将此代码粘贴到我的页面中（在 Chrome 89.0.4389.90（官方构建）（x86_64）中呈现）时，没有x，尽管当我检查它时那里有一些东西。 x 来自哪里？是否在最终用户类fa fa-times 中？我也试过<input type="search" placeholder="Search..." />，也好不到哪里去。
fa fa-times 是来自 font-awesome 的类，更具体地说是 Font Awesome 4.7.0。最简单的方法是使用 CDN 链接导入它。尝试将以下行添加到您的 <head> 部分：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">。欲了解更多信息，请查看here。

【解决方案2】：

它与methods explained here 相同。

使用输入组并调整边框..

  <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">
            <button class="btn btn-outline-secondary border-left-0 border" type="button">
                <i class="fa fa-times"></i>
            </button>
        </span>
  </div>

在按钮上使用相对位置...

 <div class="d-flex">
     <input class="form-control py-2 bg-transparent" type="search" value="search" id="example-search-input">
     <button class="btn btn-outline-secondary border-0 btn-pos" type="button">
         <i class="fa fa-times"></i>
     </button>
 </div>

 .btn-pos {
    position:relative;
    z-index:1;
    left: -36px;
 }

使用带列的行并调整边框..

  <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-times"></i>
            </button>
        </div>
  </div>

https://www.codeply.com/go/SCMW5b1DKr

【讨论】：

【解决方案3】：

Bootstrap 文档中有一个示例可供您改编：
https://getbootstrap.com/docs/4.1/components/input-group/#button-addons

例如

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">X</button>
  </div>
</div>

【讨论】：