在引导输入字段中放置清除按钮

Question

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

我使用绝对定位 right:0 和 top: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: relativeforinput-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单击关闭按钮时输入中的丑陋。