Bootstrap 4: 搜索输入框 x 清空搜索

Question

Bootstrap 4: 搜索输入框 x 清空搜索

20

使用最新的Bootstrap 4，我试图在一个搜索输入框里放置一个x。

我可以简单地使用：

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

但是这在Firefox中不受支持...

我已经尝试使用addon和负边距，但一些方式下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按钮出现在右对齐的输入框内？

- Thibs

1

这个问题应该重新开放。它与用于关闭它的问题不同：https://dev59.com/PlcO5IYBdhLWcg3wgR0G 尽管它们是相关的。 - carloswm85

3个回答

6

这与这里解释的方法相同。

使用输入组并调整边框即可。

  <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

- Zim

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>

- David Lavender

1

我认为这应该是被采纳的答案 - 使用框架功能而不是CSS变通方法。 - Maxim Mazurok

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tommy · Accepted Answer

我认为 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>

这看起来像这样：