Position clear button in bootstrap input field

Question

I'm trying to position a clear button inside an input field, at the right before to the search icon, however it's not working; the "x" is displayed in front of the input field instead.

i use absolute positioning with right:0 and top:4px

You can see my example here: http://www.bootply.com/YUwdJ5Kvx6

Answer 1

Try this i have appended the button before and after. Comment if this is you want or not. Did i understood you correct?

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

Answer 2

A little update to get what you want:

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>

I added position: relative to input-group-btn for position: absolute to work on the close button. Then just a negative right: 36px to move the button in the input field.

I put the close button inside the input-group-btn because it was easier for me, and it automatically takes care of the vertical alignment of your button (I just added the btn class to the a tag).

I added padding-left: 30px !important to the input field to avoid user typing under the x button. To have a symmetrical space, you would need 38px, but it looks a bit much... You can change this value at your discretion to get the result you want.

Since the a tag is inside the input-btn-group with the btn class, you need something like a:hover { box-shadow: none ; } to avoid ugly box-shadow in your input when clicking on the close button.