How to add in input form button cancel - html

Question

I would like to do something like this.
but i dont know how to do it in Bootstrap correctly
Here's my html code where i get only like this.
<form class="navbar-form" role="search">
<div class="input-group add-on">
<input type="text" [(ngModel)]="text" class="form-control" placeholder="Search" name="text">
<button class="btn btn-default" type="submit" (click)="clear()"><i class="glyphicon glyphicon-remove"></i></button>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" (click)="search()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>

Answer 1

I honestly think that buttons are a pain in the butt and are outdated. I much rather use a simple div, a or in this case i tag.
Therefore this might not be completely what OP asked for but in my eyes it is a more elegant solution.
The secret to this solution is using the flex property to the wrapper, which makes it possible to automatically size its children within its space.
.field {
display: flex;
position: relative;
max-width: 285px;
min-width: 200px;
width: 100%;
flex-direction: row;
}
Please check out the snippet for a more specific example. This works in all modern browsers and from internet explorer 10.
var input = document.getElementById("search");
function clearInput() {
input.value = "";
}
function search () {
console.log("searching");
// Implement search function here...
}
.field {
display: flex;
position: relative;
max-width: 285px;
min-width: 200px;
width: 100%;
flex-direction: row;
}
.field > input[type=text] {
flex: 1;
padding: 0.6em 0.6em 0.6em 1.5em;
border: 1px solid #c4c4c4;
border-right: none;
display: block;
}
.field > div {
padding: 0.4em 0;
background-color: #fff;
border: 1px solid #c4c4c4;
border-left: none;
border-radius: 1px;
display: inline-block;
cursor: pointer;
}
.field > div > i {
padding: 0.2em 0.8em;
background-color: inherit;
color: #555555;
border: none;
border-left: 1px solid #c4c4c4;
margin-right: 1px;
}
.field > div:last-child > i {
border-left: none;
}
.field > div:hover > i {
color: #009BDB;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="field">
<input type="text" id="search" placeholder="Search..." />
<div>
<i class="fa fa-times" onclick="clearInput()"></i>
</div>
<div>
<i class="fa fa-search" onclick="search()"></i>
</div>
</div>

Answer 2

You could play around with position: relative,
for example:
html:
<form class="navbar-form" role="search">
<div class="input-group add-on">
<input type="text" [(ngModel)]="text" class="form-control" placeholder="Search" name="text">
<button class="btn btn-default test" type="submit" (click)="clear()"><i class="glyphicon glyphicon-remove"></i></button>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" (click)="search()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
css:
.form-control {
position:relative;
}
.test {
position:relative;
right:20px;
}
example jsfiddle: https://jsfiddle.net/DTcHh/92025/