html - 在 Bootstrap 输入字段中放置清除按钮

Question

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

我使用绝对定位，右侧:0 和顶部:4px

您可以在这里查看我的示例:http://www.bootply.com/YUwdJ5Kvx6

Answer 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 标签位于带有 btn 类的 input-btn-group 内，因此您需要类似 a 的内容:悬停{框阴影:无； } 以避免单击关闭按钮时输入中出现丑陋的 box-shadow。