Position clear button in bootstrap input field - html

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

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.

Answer 2

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>