将关闭按钮/ 'x'纯文本图标添加到Bootstrap 5窗体浮动和窗体控件输入字段

tkclm6bt 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(425)

使用Bootstrap 5，我想在form floating和form control输入字段中添加一个close button，这样用户就可以轻松地清除移动的上的文本，但它没有按预期工作。我希望在右端添加一个简单的“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>

我做错了什么？
我可能做了一些愚蠢的事情，但我找不到任何例子，这对引导5，所以请原谅愚蠢的问题。

twitter-bootstrap

来源：https://stackoverflow.com/questions/68948559/adding-close-buttons-x-clear-text-icons-to-bootstrap5-form-floating-and-form

2条答案

按热度按时间

ar7v8xwq1#

<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

赞(0）回复(0）举报 2022-12-07

au9on6nz2#

“我在寻找右端的一个简单的”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>

或者，使用类似问题中所述的输入组

<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

赞(0）回复(0）举报 2022-12-07

我来回答

将关闭按钮/ 'x'纯文本图标添加到Bootstrap 5窗体浮动和窗体控件输入字段

2条答案

相关问题

热门标签

最新问答