在引导输入字段中定位清除按钮答案

【问题标题】：Position clear button in bootstrap input field在引导输入字段中定位清除按钮
【发布时间】：2014-07-04 21:29:32
【问题描述】：

我试图在输入字段内放置一个清除按钮，在搜索图标的右侧，但是它不起作用； “x”改为显示在输入字段的前面。

我使用绝对定位，right:0 和 top:4px

您可以在此处查看我的示例：http://www.bootply.com/YUwdJ5Kvx6

【问题讨论】：

这应该可以。稍微修改了 HTML，但这应该会让你到达那里：bootply.com/KTTvsKle3v。可能需要更多地使用z-index 来获取FF，也许还需要使用HTML 堆叠顺序。我在一个应用程序中使用了同样的技术，效果很好。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

一点点更新即可获得您想要的：

input {
    /* Avoid use typing under the clear button. */
    padding-right: 30px !important; 
}

.input-group-btn {
  position: relative;  
  /* This avoid the "clear" button being hidden while 
     the input has focus on. */
  z-index: 1000;
}

.input-group-btn a.btn {
   position: absolute;
   right: 38px;
   top: 0px;
}

/* This avoid the bad effect when clicking the button. */
.input-group-btn a.btn:hover,
.input-group-btn a.btn:active {
   box-shadow: none; 
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<div style="width: 300px;">
  <div class="input-group">
    <input class="form-control" placeholder="Search by ID..." type="text">
    <span class="input-group-btn">
      <a class="btn" style="color: rgb(204, 204, 204); text-decoration: none; " href="#clear">
        <i class="glyphicon glyphicon-remove"></i>
      </a>
      <button type="submit" class="btn btn-default">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </span>
  </div>
</div>

我将position: relative 添加到input-group-btn 以供position: absolute 使用关闭按钮。然后只是一个否定的right: 36px 来移动输入字段中的按钮。

我将close 按钮放在input-group-btn 中，因为它对我来说更容易，并且它会自动处理按钮的垂直对齐（我刚刚将btn 类添加到a 标签） .

我在输入字段中添加了padding-left: 30px !important，以避免用户在x 按钮下输入内容。要有一个对称的空间，你需要38px，但它看起来有点多......你可以随意更改这个值以获得你想要的结果。

由于a 标记位于input-btn-group 和btn 类内，因此您需要类似a:hover { box-shadow: none ; } 的内容，以避免在单击关闭按钮时输入难看的box-shadow。

【讨论】：

谢谢，但它似乎在 Firefox 中不起作用，有什么想法吗？
@Wesley 好吧，这似乎是 Firefox 中的一个错误...根据 CSS 规范，带有 position: absolute 的元素应该根据其带有 position: relative 的第一个父元素定位（在我们的例子中是input-group-btn)。无论如何，我更新了我的答案，将 left: -34px 更改为 right: 36px 以使其适用于 Firefox、Chrome 和 IE9。我没有检查其他浏览器，但应该没问题。

【解决方案2】：

试试这个，我在之前和之后附加了按钮。如果这是你想要的，请评论。我没听错吗？

<form action="#" method="get" class="sidebar-form" id="id_search" style="width:300px;margin-left:100px;margin-top:100px;">

  <div class="input-group double-input">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <span class="glyphicon glyphicon-remove"></span>
      </button>
    </span>
    <input type="text" placeholder="Second" class="form-control" />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <span class="glyphicon glyphicon-remove"></span>
      </button>
    </span>

  </div><!-- /input-group -->
</form>

【讨论】：