将关闭按钮/“x”明文图标添加到 Bootstrap5 表单浮动和表单控制输入字段

使用 Bootstrap 5,我想将 close button 添加到 form floatingform control 输入字段,以便用户可以轻松地在移动设备上清除文本,但它没有按预期工作。我在右端寻找一个简单的“x”,它会在文本输入后显示, as shown in the search field in this example

使用我希望插入的关闭按钮从文档中复制示例的最小化:

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <label for="floatingInput">Email address</label>
</div>
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</html>

我究竟做错了什么?

我可能在做一些愚蠢的事情,但我找不到 Bootstrap 5 的任何例子,所以请原谅这个愚蠢的问题。

stack overflow Adding close buttons / 'x' clear text icons to Bootstrap5 Form Floating and Form Control input fields
原文答案

答案:

作者头像
<div class="input-group position-relative d-inline-flex align-items-center">
            <input class="form-control " formControlName="textInput" type="text" value="">
            <i class="bi bi-search position-absolute" 
            style="
              right: 10px;
              cursor: pointer;
              z-index: 100;">
            </i>
</div>

https://codesandbox.io/s/bootstrap-5-playground-forked-z65ldi?file=/index.html

作者头像

“我在右端寻找一个简单的‘x’,它会在文本输入后显示,如本例中的搜索字段所示。”

'X' 是那个例子只是一个搜索类型输入......

<div class="form-floating mb-3">
  <input type="search" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

或者,使用此 similar question 中解释的输入组

       <div>
            <label for="exampleFormControlInput2" class="form-label">Email address</label>
            <div class="input-group">
                <input class="form-control border-end-0 border" type="email" placeholder="name@example.com" id="exampleFormControlInput2">
                <span class="input-group-append">
                    <button class="btn btn-white border-start-0 border" type="button">
                        <i class="bi bi-search"></i>
                    </button>
                </span>
            </div>
       </div>

Codeply