Bootstrap 4: search input x clear search

I think that input-group-addon is the problem.

Try this:

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
    <button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;">
      <i class="fa fa-times"></i>
    </button>
</div>

This looks like this:

It would be the same as the methods explained here.

Use a input group and adjust the borders..

  <div class="input-group">
        <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
        <span class="input-group-append">
            <button class="btn btn-outline-secondary border-left-0 border" type="button">
                <i class="fa fa-times"></i>
            </button>
        </span>
  </div>

Use relative position on the button...

 <div class="d-flex">
     <input class="form-control py-2 bg-transparent" type="search" value="search" id="example-search-input">
     <button class="btn btn-outline-secondary border-0 btn-pos" type="button">
         <i class="fa fa-times"></i>
     </button>
 </div>

 .btn-pos {
    position:relative;
    z-index:1;
    left: -36px;
 }

Use a row with columns and adjust the borders..

  <div class="row no-gutters">
        <div class="col">
            <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
                <i class="fa fa-times"></i>
            </button>
        </div>
  </div>

https://www.codeply.com/go/SCMW5b1DKr