引导程序输入字段中的位置清除按钮

user429620 发表于 Dev

用户429620

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

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

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

霍尔特

进行一些更新以获得所需的内容：

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-btnforposition: 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的关闭按钮时，点击您的输入。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-9

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章