Question

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

我使用右边的绝对定位：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标记位于带有input-btn-group类的btn内，因此您需要a:hover { box-shadow: none ; }之类的内容，以避免点击时输入中出现丑陋的box-shadow关闭按钮。

Answer 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>

在bootstrap输入字段中定位清除按钮

2 个答案: